fix: length of charts

Author: Lasserich

public/locales/en.json

@@ -425,6 +425,15 @@
       "inactive": "Coming soon...",
       "activate": "Activate"
     },
+    "KyvernoHint": {
+      "title": "Kyverno",
+      "subtitle": "Enforce policies",
+      "activeStatus": "Active v",
+      "progressAvailable": "Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate"
+    },
     "common": {
       "loading": "Loading...",
       "errorLoadingResources": "Error loading resources",

src/components/BentoGrid/ComponentCard/ComponentCard.module.css

@@ -56,6 +56,30 @@
   padding: 0 0.5rem;
 }
 
+.progressBarContainerSmall {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 400px;
+  padding: 0 0.5rem;
+}
+
+.progressBarContainerMedium {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 600px;
+  padding: 0 0.75rem;
+}
+
+.progressBarContainerLarge {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: none;
+  padding: 0 1rem;
+}
+
 .progressBar {
   width: 100%;
 }

src/components/BentoGrid/ComponentCard/ComponentCard.tsx

@@ -38,7 +38,7 @@ export const ComponentCard: React.FC<GenericHintProps & { onClick?: () => void;
               />
             }
             titleText={config.title}
-            subtitleText={config.subtitle}
+            subtitleText={size === 'small' ? undefined : config.subtitle}
             interactive={enabled}
           />
         }
@@ -65,14 +65,29 @@ export const ComponentCard: React.FC<GenericHintProps & { onClick?: () => void;
         )}
 
         <div className={styles.contentContainer}>
-          <div className={styles.progressBarContainer}>
+          <div className={
+            size === 'small' ? styles.progressBarContainerSmall :
+            size === 'medium' ? styles.progressBarContainerMedium :
+            styles.progressBarContainerLarge
+          }>
             <MultiPercentageBar
               segments={hintState.segments}
               className={styles.progressBar}
               label={hintState.label}
               showPercentage={hintState.showPercentage}
               isHealthy={hintState.isHealthy}
               showOnlyNonZero={hintState.showOnlyNonZero ?? true}
+              barWidth={
+                size === 'small' ? '80%' :
+                size === 'medium' ? '85%' :
+                '90%'
+              }
+              barHeight={size === 'small' ? '8px' : '12px'}
+              barMaxWidth={
+                size === 'small' ? '400px' :
+                size === 'medium' ? '600px' :
+                'none'
+              }
             />
           </div>
         </div>

src/components/BentoGrid/ComponentCard/componentConfigs.ts

@@ -56,8 +56,8 @@ export const useKyvernoHintConfig = (): GenericHintConfig => {
   const { t } = useTranslation();
 
   return {
-    title: "Kyverno",
-    subtitle: "Enfore policies",
+    title: t('Hints.KyvernoHint.title'),
+    subtitle: t('Hints.KyvernoHint.subtitle'),
     iconSrc: '/kyverno.svg',
     iconAlt: 'Kyverno',
     iconStyle: { borderRadius: '0' }, // Vault icon should not be rounded