[AI4DSOC] fix styling to address cutoff when screen is narrow (#219306)

kgeller · kgeller · commit 1d681e765ad4 · 2025-06-04T11:58:55.000-04:00
## Summary Fixing the css settings for the AI4DSOC integrations cards so the cards resize when the screen is narrow, instead of getting cut off. ## Screenshots ### Before <img width="750" alt="Screenshot 2025-04-25 at 2 42 33 PM" src="https://github.com/user-attachments/assets/2cb1033f-8998-4fd7-90ee-e7b6ce12c8ef" /> ### After <img width="750" alt="Screenshot 2025-04-25 at 2 39 25 PM" src="https://github.com/user-attachments/assets/dbee50c9-2c90-455c-8dc7-f7cf102d299b" /> ### Outside of AI4DSOC not impacted <img width="750" alt="Screenshot 2025-04-25 at 2 33 25 PM" src="https://github.com/user-attachments/assets/3b3961d5-4276-4da1-b046-3c8b0ac99bbe" /> ### AI4DSOC when not narrow screen <img width="750" alt="Screenshot 2025-04-25 at 2 50 44 PM" src="https://github.com/user-attachments/assets/ff41c130-1691-4fae-baba-8b24e3641337" /> Relates - elastic/security-team#11789 - #217905 (cherry picked from commit 6516cff) # Conflicts: # x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
@@ -78,6 +78,7 @@ export function PackageCard({
   titleLineClamp,
   descriptionLineClamp,
   maxCardHeight,
+  minCardHeight,
   showDescription = true,
   showReleaseBadge = true,
 }: PackageCardProps) {
@@ -227,6 +228,8 @@ export function PackageCard({
             [class*='euiCard__titleButton'] {
               ${getLineClampStyles(titleLineClamp)}
             }
+
+            min-height: ${minCardHeight ? `${minCardHeight}px` : '127px'};
           `}
           data-test-subj={testid}
           isquickstart={isQuickstart}
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/home/card_utils.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/home/card_utils.tsx
@@ -55,6 +55,7 @@ export interface IntegrationCardItem {
   isUnverified?: boolean;
   isUpdateAvailable?: boolean;
   maxCardHeight?: number;
+  minCardHeight?: number;
   name: string;
   onCardClick?: () => void;
   release?: IntegrationCardReleaseLabel;
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/integrations/use_enhanced_integration_cards.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/integrations/use_enhanced_integration_cards.test.tsx
@@ -72,10 +72,10 @@ describe('applyCategoryBadgeAndStyling', () => {
     expect(result.showReleaseBadge).toBe(false);
   });
 
-  it('should set maxCardHeight to 88', () => {
+  it('should set minCardHeight to 88', () => {
     const result = applyCategoryBadgeAndStyling(mockInt, IntegrationsFacets.available);
 
-    expect(result.maxCardHeight).toBe(88);
+    expect(result.minCardHeight).toBe(88);
   });
 });
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/integrations/use_enhanced_integration_cards.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/integrations/use_enhanced_integration_cards.tsx
@@ -26,7 +26,7 @@ const FEATURED_INTEGRATION_SORT_ORDER = [
   'epr:sentinel_one',
   'epr:crowdstrike',
 ];
-const INTEGRATION_CARD_MAX_HEIGHT_PX = 88;
+const INTEGRATION_CARD_MIN_HEIGHT_PX = 88;
 
 const addPathParamToUrl = (url: string, path: string) => {
   const encodedPath = encodeURIComponent(path);
@@ -67,7 +67,7 @@ export const applyCategoryBadgeAndStyling = (
           </EuiFlexItem>,
         ] as React.ReactNode[])
       : [],
-    maxCardHeight: INTEGRATION_CARD_MAX_HEIGHT_PX,
+    minCardHeight: INTEGRATION_CARD_MIN_HEIGHT_PX,
   };
 };
 
