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

Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com>
Co-authored-by: Pedro Martín <pedromarting3@gmail.com>
Co-authored-by: Pepe Fagoaga <pepe@prowler.com>

ui/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
+## [1.25.1] (Prowler v5.25.1)
+
+### 🐞 Fixed
+
+- Compliance page export menu now scales on small screens, and frameworks load on first render without requiring a manual scan re-selection [(#10918)](https://github.com/prowler-cloud/prowler/pull/10918)
+
+---
+
 ## [1.25.0] (Prowler v5.25.0)
 
 ### 🚀 Added

ui/app/(prowler)/compliance/page.tsx

@@ -166,6 +166,7 @@ export default async function Compliance({
           >
             <SSRComplianceGrid
               searchParams={resolvedSearchParams}
+              scanId={selectedScanId}
               selectedScan={selectedScanData}
             />
           </Suspense>
@@ -179,12 +180,13 @@ export default async function Compliance({
 
 const SSRComplianceGrid = async ({
   searchParams,
+  scanId,
   selectedScan,
 }: {
   searchParams: SearchParamsProps;
+  scanId: string | null;
   selectedScan?: ScanEntity;
 }) => {
-  const scanId = searchParams.scanId?.toString() || "";
   const regionFilter = searchParams["filter[region__in]"]?.toString() || "";
 
   // Only fetch compliance data if we have a valid scanId
@@ -247,7 +249,7 @@ const SSRComplianceGrid = async ({
     <ComplianceOverviewPanel>
       <ComplianceOverviewGrid
         frameworks={frameworks}
-        scanId={scanId}
+        scanId={scanId ?? ""}
         selectedScan={selectedScan}
         latestCisIds={latestCisIds}
       />

ui/components/compliance/compliance-card.tsx

@@ -89,12 +89,38 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
     <Card
       variant="base"
       padding="md"
-      className="cursor-pointer transition-shadow hover:shadow-md"
+      className="relative cursor-pointer transition-shadow hover:shadow-md"
       onClick={navigateToDetail}
     >
+      <div
+        className="absolute top-2 right-2 z-10"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+          }
+        }}
+        role="group"
+        tabIndex={0}
+      >
+        <ComplianceDownloadContainer
+          compact
+          orientation="column"
+          buttonWidth="icon"
+          presentation="dropdown"
+          scanId={scanId}
+          complianceId={complianceId}
+          reportType={getReportTypeForCompliance(
+            title,
+            complianceId,
+            isLatestCisForProvider,
+          )}
+          disabled={hasRegionFilter}
+        />
+      </div>
       <CardContent className="p-0">
         <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-start">
-          <div className="flex shrink-0 items-center justify-between sm:flex-col sm:items-start sm:gap-2">
+          <div className="flex shrink-0 items-center sm:flex-col sm:items-start sm:gap-2">
             {getComplianceIcon(title) && (
               <Image
                 src={getComplianceIcon(title)}
@@ -102,37 +128,11 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
                 className="h-10 w-10 min-w-10 self-start rounded-md border border-gray-300 bg-white object-contain p-1"
               />
             )}
-            <div
-              className="shrink-0"
-              onClick={(e) => e.stopPropagation()}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.stopPropagation();
-                }
-              }}
-              role="group"
-              tabIndex={0}
-            >
-              <ComplianceDownloadContainer
-                compact
-                orientation="column"
-                buttonWidth="icon"
-                presentation="dropdown"
-                scanId={scanId}
-                complianceId={complianceId}
-                reportType={getReportTypeForCompliance(
-                  title,
-                  complianceId,
-                  isLatestCisForProvider,
-                )}
-                disabled={hasRegionFilter}
-              />
-            </div>
           </div>
           <div className="flex w-full min-w-0 flex-col gap-3">
             <Tooltip>
               <TooltipTrigger asChild>
-                <h4 className="text-small truncate leading-5 font-bold">
+                <h4 className="text-small truncate pr-9 leading-5 font-bold">
                   {formatTitle(title)}
                   {version ? ` - ${version}` : ""}
                 </h4>

ui/components/compliance/compliance-download-container.test.tsx

@@ -70,7 +70,7 @@ describe("ComplianceDownloadContainer", () => {
     const trigger = screen.getByRole("button", {
       name: "Open compliance export actions",
     });
-    expect(trigger.className).toContain("border-text-neutral-secondary");
+    expect(trigger.className).toContain("rounded-md");
   });
 
   it("should open export actions from the compact trigger", async () => {

ui/components/shadcn/dropdown/action-dropdown.tsx

@@ -15,8 +15,7 @@ import {
 
 const ACTION_TRIGGER_STYLES = {
   table: "hover:bg-bg-neutral-tertiary rounded-full p-1 transition-colors",
-  bordered:
-    "hover:bg-bg-neutral-tertiary rounded-full border border-text-neutral-secondary p-2 transition-colors",
+  bordered: "hover:bg-bg-neutral-tertiary rounded-md p-1.5 transition-colors",
 } as const;
 
 type ActionDropdownVariant = keyof typeof ACTION_TRIGGER_STYLES;
@@ -24,7 +23,7 @@ type ActionDropdownVariant = keyof typeof ACTION_TRIGGER_STYLES;
 interface ActionDropdownProps {
   /** The dropdown trigger element. Defaults to a vertical dots icon button */
   trigger?: ReactNode;
-  /** Trigger style variant. "table" = no border, "bordered" = circular border */
+  /** Trigger style variant. "table" = compact pill, "bordered" = card action */
   variant?: ActionDropdownVariant;
   /** Alignment of the dropdown content */
   align?: "start" | "center" | "end";
@@ -62,7 +61,12 @@ export function ActionDropdown({
             aria-label={ariaLabel}
             className={ACTION_TRIGGER_STYLES[variant]}
           >
-            <EllipsisVertical className="text-text-neutral-secondary size-6" />
+            <EllipsisVertical
+              className={cn(
+                "text-text-neutral-secondary",
+                variant === "bordered" ? "size-5" : "size-6",
+              )}
+            />
           </button>
         )}
       </DropdownMenuTrigger>