fix(ui): compliance card layout polish (#10939)

Author: HugoPBrito

ui/CHANGELOG.md

@@ -2,10 +2,11 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
-## [1.26.0] (Prowler UNRELEASED)
+## [1.25.2] (Prowler UNRELEASED)
 
 ### 🔄 Changed
 
+- Compliance cards: progress bar now spans the full card width, the passing-requirements caption sits beside the framework logo under the title, and the ISO 27001 logo asset is recentered within its tile [(#10939)](https://github.com/prowler-cloud/prowler/pull/10939)
 - Findings expanded resource rows now drop the redundant cube icons, render Service and Region with the same compact label style as Last seen and Failing for, and reorder columns to Status, Resource, Provider, Severity, then field labels [(#10949)](https://github.com/prowler-cloud/prowler/pull/10949)
 
 ---

ui/components/compliance/compliance-card.tsx

@@ -119,56 +119,58 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
         />
       </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 sm:flex-col sm:items-start sm:gap-2">
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex items-center gap-3 pr-9">
             {getComplianceIcon(title) && (
-              <Image
-                src={getComplianceIcon(title)}
-                alt={`${title} logo`}
-                className="h-10 w-10 min-w-10 self-start rounded-md border border-gray-300 bg-white object-contain p-1"
-              />
+              <div className="flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white">
+                <Image
+                  src={getComplianceIcon(title)}
+                  alt={`${title} logo`}
+                  width={32}
+                  height={32}
+                  className="h-8 w-8 object-contain"
+                />
+              </div>
             )}
-          </div>
-          <div className="flex w-full min-w-0 flex-col gap-3">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <h4 className="text-small truncate pr-9 leading-5 font-bold">
+            <div className="flex min-w-0 flex-1 flex-col">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <h4 className="text-small truncate leading-5 font-bold">
+                    {formatTitle(title)}
+                    {version ? ` - ${version}` : ""}
+                  </h4>
+                </TooltipTrigger>
+                <TooltipContent>
                   {formatTitle(title)}
                   {version ? ` - ${version}` : ""}
-                </h4>
-              </TooltipTrigger>
-              <TooltipContent>
-                {formatTitle(title)}
-                {version ? ` - ${version}` : ""}
-              </TooltipContent>
-            </Tooltip>
-            <div className="flex flex-col gap-2">
-              <div className="flex items-center justify-between gap-3 text-xs">
-                <span className="text-text-neutral-secondary font-medium tracking-wider">
-                  Score:
-                </span>
-                <span className="text-text-neutral-secondary">
-                  {ratingPercentage}%
-                </span>
-              </div>
-              <Progress
-                aria-label="Compliance score"
-                value={ratingPercentage}
-                className="border-border-neutral-secondary h-2.5 border drop-shadow-sm"
-                indicatorClassName={getScoreIndicatorClass(
-                  getRatingVariant(ratingPercentage),
-                )}
-              />
-            </div>
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <small className="min-w-0">
+                </TooltipContent>
+              </Tooltip>
+              <small className="truncate">
                 <span className="mr-1 text-xs font-semibold">
                   {passingRequirements} / {totalRequirements}
                 </span>
                 Passing Requirements
               </small>
             </div>
           </div>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between gap-3 text-xs">
+              <span className="text-text-neutral-secondary font-medium tracking-wider">
+                Score:
+              </span>
+              <span className="text-text-neutral-secondary">
+                {ratingPercentage}%
+              </span>
+            </div>
+            <Progress
+              aria-label="Compliance score"
+              value={ratingPercentage}
+              className="border-border-neutral-secondary h-2.5 border drop-shadow-sm"
+              indicatorClassName={getScoreIndicatorClass(
+                getRatingVariant(ratingPercentage),
+              )}
+            />
+          </div>
         </div>
       </CardContent>
     </Card>