github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(home): wrap items on small screens [EE-4798] (#8220)

pull/8230/head
Chaim Lev-Ari 2022-12-20 10:57:59 +02:00 committed by GitHub
parent 59d35d26d8
commit b4a6f6911c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
View File

@ -65,7 +65,7 @@ export function EnvironmentItem({
<EnvironmentIcon type={environment.Type} />
</div>
<div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
<div className="space-x-3 flex items-center">
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<span className="font-bold">{environment.Name}</span>
{isEdge ? (
<EdgeIndicator environment={environment} showLastCheckInDate />
@ -74,13 +74,10 @@ export function EnvironmentItem({
<EnvironmentStatusBadge status={environment.Status} />
{snapshotTime && (
<span
className="space-left small text-muted vertical-center"
className="small text-muted vertical-center gap-1"
title="Last snapshot time"
>
<Activity
className="icon icon-sm space-right"
aria-hidden="true"
/>
<Activity className="icon icon-sm" aria-hidden="true" />
{snapshotTime}
</span>
)}
@ -93,15 +90,15 @@ export function EnvironmentItem({
</span>
)}
</div>
<div className="small text-muted space-x-2 vertical-center">
<div className="small text-muted flex flex-wrap items-center gap-x-4 gap-y-2">
{groupName && (
<span className="font-semibold">
<span>Group: </span>
<span>{groupName}</span>
</span>
)}
<span className="vertical-center">
<Tag className="icon icon-sm space-right" aria-hidden="true" />
<span className="vertical-center gap-1">
<Tag className="icon icon-sm" aria-hidden="true" />
{tags}
</span>
{isEdge && (
@ -112,10 +109,7 @@ export function EnvironmentItem({
/>
{environment.Edge.AsyncMode && (
<span className="vertical-center gap-1">
<Globe
className="icon icon-sm space-right"
aria-hidden="true"
/>
<Globe className="icon icon-sm" aria-hidden="true" />
Async Environment
</span>
)}

2
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
View File

@ -18,7 +18,7 @@ export function EnvironmentStats({ environment }: Props) {
const component = getComponent(platform, environment);
return (
<span className="blocklist-item-desc flex items-center gap-10">
<span className="blocklist-item-desc flex items-center gap-x-10 gap-y-2 flex-wrap">
{component}
</span>
);