fix(ui): compliance card layout polish#10939
Merged
Merged
Conversation
Bump the compliance card progress bar from h-2.5 (10px) to h-3 (12px) for better visual presence on the redesigned cards.
Restructure the compliance card so the framework logo and title share a single top row (with right padding reserved for the absolute dropdown menu) and the score progress bar spans the full card width below. Wrap the framework logo in an explicit flex centering container so the image stays vertically and horizontally centered within its 40x40 tile, regardless of the source asset's aspect ratio. Revert the previous bar height bump back to h-2.5 to keep the bar proportionate to the wider footprint.
Wrap the framework logo in a flex container that explicitly centers a fixed 32x32 next/image element inside the 40x40 white tile, so the logo lands in the visual center regardless of how the source SVG/PNG is structured.
The iso-27001.svg shipped with asymmetric framing: - the rect was positioned at x=0.666 inside a viewBox of 41 wide, leaving uneven left/right whitespace - the inner pattern transform translated the embedded PNG by -0.237112, cropping more of the right side than the left Tighten the viewBox to 40x45, anchor the rect at x=0, and adjust the pattern translate to -0.2575 so the cropped PNG is centered symmetrically inside the rect.
Stack the framework title and the 'X / Y Passing Requirements' caption in a column next to the logo, leaving the score row and full-width progress bar below. The dropdown export menu stays absolute top-right unchanged.
Contributor
|
✅ Conflict Markers Resolved All conflict markers have been successfully resolved in this pull request. |
Contributor
|
✅ All necessary |
Member
Author
|
Contributor
🔒 Container Security ScanImage: 📊 Vulnerability Summary
2 package(s) affected
|
pfe-nazaries
previously approved these changes
Apr 30, 2026
Updated version to 1.26.0 and made changes to compliance cards.
pfe-nazaries
approved these changes
May 4, 2026
prowler-bot
added
the
was-backported
Collaborator
💚 All backports created successfully
Questions ?Please refer to the Backport tool documentation and see the Github Action logs for details |
pfe-nazaries
pushed a commit
that referenced
this pull request
May 5, 2026
PR #10939 collapsed the compliance card to an always-stacked column layout and removed `sm:flex-row`, but the existing source assertion test was not updated and started failing in CI on every PR that touched the UI. Update the assertion to reflect the new layout and rename the test case accordingly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
The compliance cards on
/compliancehad a few layout rough edges after the export-menu repositioning landed in #10918:X / Y Passing Requirementscaption lived at the bottom of the card, isolated from the title it describes.iso-27001.svgasset shipped with an asymmetricviewBox(x="0.666626"rect inside a41-wide viewBox) and an off-center pattern transform, which made the ISO logo appear shifted to the right inside its tile.Description
ui/components/compliance/compliance-card.tsx:[logo + (title / passing-requirements caption)] → [score label + percentage] → [progress bar]. The progress bar now uses the full card width.X / Y Passing Requirementscaption next to the framework logo, stacked under the title.flex items-center justify-centercontainer with a fixed 32×32next/imageinside, so the image lands in the visual center of the 40×40 white tile regardless of the source asset's aspect ratio.ui/components/icons/compliance/iso-27001.svg:viewBoxfrom0 0 41 45to0 0 40 45, anchored the rect atx="0", and adjusted the inner pattern transform translate from-0.237112to-0.2575so the embedded PNG is symmetrically cropped within the rect.Steps to review
cd ui && pnpm install && pnpm run dev/complianceafter selecting any scan with at least one framework.X / Y Passing Requirementscaption is directly under the title.Score:label and percentage are on the same row, full card width.Checklist
Community Checklist
UI
License
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.