Skip to content

fix(greenhouse): improve ReadinessConditions layout with responsive column widths #1694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArtieReus merged 7 commits into from
May 18, 2026
+39 −33
Merged

fix(greenhouse): improve ReadinessConditions layout with responsive column widths #1694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
07e1a08
fix(greenhouse): improve ReadinessConditions layout with responsive c…
ArtieReus May 13, 2026
0f661de
chore(greenhouse): adds changeset
ArtieReus May 13, 2026
3fa2b7d
chore(greenhouse): copilot suggestions
ArtieReus May 14, 2026
0d8f422
Merge branch 'main' into artie-fix-readiness-boxes
ArtieReus May 14, 2026
74ba747
Merge branch 'main' into artie-fix-readiness-boxes
ArtieReus May 15, 2026
108a949
fix(greenhouse): apply code review suggestions
MartinS-git May 15, 2026
334350c
Merge branch 'main' into artie-fix-readiness-boxes
ArtieReus May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fruity-schools-stand.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@cloudoperators/juno-app-greenhouse": patch
---

Improve ReadinessConditions layout with responsive column widths
67 changes: 34 additions & 33 deletions apps/greenhouse/src/components/admin/common/ReadinessConditions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,48 +67,49 @@ const getVariantStyles = (variant: ConditionVariant) => {
}
}

const gridColumnClasses =
"w-2/5 md:w-1/3 lg:w-1/5 xl:w-1/6 max-w-xs break-words whitespace-normal sm:whitespace-nowrap overflow-hidden"

const gridRowClasses = "py-1"

const ConditionCard: React.FC<{ condition: ReadinessCondition }> = ({ condition }) => {
const variant = getReadinessConditionVariant(condition)

return (
<Box className={`p-4 border ${getVariantStyles(variant)}`}>
<Stack direction="vertical" gap="4">
<div>
<ConditionBadge condition={condition} />
</div>
<Grid>
<GridRow className="py-1">
<GridColumn>
<strong>{condition.type}</strong>
<ConditionBadge condition={condition} />
<Grid className="mt-4">
<GridRow className={gridRowClasses}>
<GridColumn className={gridColumnClasses}>
<strong>{condition.type}</strong>
</GridColumn>
<GridColumn auto>{condition.status}</GridColumn>
</GridRow>
Comment thread
ArtieReus marked this conversation as resolved.
<GridRow className={gridRowClasses}>
<GridColumn className={gridColumnClasses}>
<strong>Last status change</strong>
</GridColumn>
<GridColumn auto>
{condition.lastTransitionTime ? new Date(condition.lastTransitionTime).toLocaleString() : "N/A"}
</GridColumn>
</GridRow>
{condition.message && (
<GridRow className={gridRowClasses}>
<GridColumn className={gridColumnClasses}>
<strong>Last message</strong>
</GridColumn>
<GridColumn auto>{condition.status}</GridColumn>
<GridColumn auto>{condition.message}</GridColumn>
</GridRow>
<GridRow className="py-1">
<GridColumn>
<strong>Last status change</strong>
</GridColumn>
<GridColumn auto>
{condition.lastTransitionTime ? new Date(condition.lastTransitionTime).toLocaleString() : "N/A"}
)}
{condition.reason && (
<GridRow className={gridRowClasses}>
<GridColumn className={gridColumnClasses}>
<strong>Reason</strong>
</GridColumn>
<GridColumn auto>{condition.reason}</GridColumn>
</GridRow>
{condition.message && (
<GridRow className="py-1">
<GridColumn>
<strong>Last message</strong>
</GridColumn>
<GridColumn auto>{condition.message}</GridColumn>
</GridRow>
)}
{condition.reason && (
<GridRow className="py-1">
<GridColumn>
<strong>Reason</strong>
</GridColumn>
<GridColumn auto>{condition.reason}</GridColumn>
</GridRow>
)}
</Grid>
</Stack>
)}
</Grid>
</Box>
)
}
Expand Down
Loading