Skip to content

fix(ui): reposition compliance card export menu#10918

Merged
jfagoagas merged 7 commits into
masterfrom
fix/compliance-button-responsive-size
Apr 29, 2026
Merged

fix(ui): reposition compliance card export menu#10918
jfagoagas merged 7 commits into
masterfrom
fix/compliance-button-responsive-size

Conversation

@pfe-nazaries
Copy link
Copy Markdown
Contributor

@pfe-nazaries pfe-nazaries commented Apr 28, 2026

Context

The export action button on each compliance framework card sat under the provider logo in the left column, with a circular bordered design (~42 px, rounded-full, visible border). It competed visually with the logo, did not match the card's rounded-md aesthetic, and felt disproportionate on small screens because its size was fixed.

Before
image

After
image

Description

Restyles and repositions the export dropdown trigger inside ComplianceCard:

  • Moved the trigger out of the left icon column and floated it absolute in the card's top-right corner (absolute top-2 right-2 z-10).
  • The left column now contains only the provider logo, freeing vertical space and removing the visual competition between logo and button.
  • The bordered variant of ActionDropdown is now ghost-style: rounded-md, p-1.5, no border, with a slightly smaller icon (size-5 instead of size-6). Total trigger size drops from ~42 px to ~32 px and now mirrors the card's corner radius.
  • Updated the existing ComplianceDownloadContainer test that asserted on the old border class.

No behavior change: the dropdown still opens the same CSV/PDF download options, click propagation to the card is still stopped, and the PDF item is still gated by reportType / isLatestCisForProvider.

Steps to review

  1. Open /compliance on a scan with frameworks and inspect any framework card.
  2. The icon should appear in the top-right corner of the card (no longer under the logo).
  3. The button should be a small rounded-md square (no circular border, no rounded-full).
  4. Hover the trigger — only a subtle background should appear; no border line.
  5. Open the dropdown — both items (CSV and, when applicable, PDF) should still trigger the existing download flows.
  6. Resize from mobile (~370 px) to desktop:
    • On mobile, the title row reserves pr-9 so the title doesn't overlap the floating trigger.
    • On desktop, the layout still reads logo → title → score, with the trigger floating top-right.

Checklist

Community Checklist
  • This feature/issue is listed in here or roadmap.prowler.com
  • Is it assigned to me, if not, request it via the issue/feature in here or Prowler Community Slack

UI (if applicable)

  • All issue/task requirements work as expected on the UI
  • Screenshots/Video - Mobile (X < 640px)
  • Screenshots/Video - Tablet (640px > X < 1024px)
  • Screenshots/Video - Desktop (X > 1024px)
  • Ensure new entries are added to ui/CHANGELOG.md

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

- Move the export dropdown trigger to the card's top-right corner
- Replace bordered circular button with rounded-md ghost style
- Tighten icon and padding for better hierarchy on small screens
@pfe-nazaries pfe-nazaries requested a review from a team as a code owner April 28, 2026 13:26
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 28, 2026

✅ All necessary CHANGELOG.md files have been updated.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 28, 2026

Conflict Markers Resolved

All conflict markers have been successfully resolved in this pull request.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 28, 2026

🔒 Container Security Scan

Image: prowler-ui:1fb785a
Last scan: 2026-04-29 11:56:44 UTC

📊 Vulnerability Summary

Severity Count
🔴 Critical 2
Total 2

2 package(s) affected

⚠️ Action Required

Critical severity vulnerabilities detected. These should be addressed before merging:

  • Review the detailed scan results
  • Update affected packages to patched versions
  • Consider using a different base image if updates are unavailable

📋 Resources:

Pablo F.G added 3 commits April 29, 2026 11:58
- Pass resolved scanId to SSRComplianceGrid instead of re-reading searchParams
- Prevents "no compliance data available" flash on first load
- Merge export menu and first-render fix into a single entry
- Focus on user-visible behavior over implementation details
Comment thread ui/CHANGELOG.md Outdated
pedrooot
pedrooot previously approved these changes Apr 29, 2026
@pedrooot pedrooot added the backport-to-v5.25 Backport PR to the v5.25 branch label Apr 29, 2026
Comment thread ui/CHANGELOG.md Outdated
Co-authored-by: Pepe Fagoaga <pepe@prowler.com>
@jfagoagas jfagoagas self-requested a review April 29, 2026 11:52
@jfagoagas jfagoagas merged commit ec4d277 into master Apr 29, 2026
35 checks passed
@jfagoagas jfagoagas deleted the fix/compliance-button-responsive-size branch April 29, 2026 11:52
@prowler-bot prowler-bot added the was-backported The PR was successfully backported to the target branch label Apr 29, 2026
@prowler-bot
Copy link
Copy Markdown
Collaborator

💚 All backports created successfully

Status Branch Result
v5.25

Questions ?

Please refer to the Backport tool documentation and see the Github Action logs for details

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport-to-v5.25 Backport PR to the v5.25 branch component/ui was-backported The PR was successfully backported to the target branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants