fix: fix width

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

src/plugins/management/public/components/feature_cards/feature_cards.test.tsx

@@ -103,7 +103,7 @@ describe('<FeatureCards />', () => {
   });
 
   it('render with complex navLinks', () => {
-    const { container, getAllByTestId } = render(
+    const { container } = render(
       <FeatureCards
         pageDescription=""
         navLinks={navLinks}
@@ -113,7 +113,6 @@ describe('<FeatureCards />', () => {
       />
     );
     expect(container).toMatchSnapshot();
-    expect(getAllByTestId('landingPageRow_1').length).toEqual(2);
   });
 
   it('click item', () => {

src/plugins/management/public/components/feature_cards/feature_cards.tsx

@@ -30,26 +30,20 @@ export const FeatureCards = ({
   pageDescription,
   navigationUI: { HeaderControl },
 }: FeatureCardsProps) => {
-  const itemsPerRow = 4;
   const groupedCardForDisplay = useMemo(() => {
-    const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[][] }> = [];
+    const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[] }> = [];
     // The navLinks has already been sorted based on link / category's order,
     // so it is safe to group the links here.
     navLinks.forEach((link) => {
       let lastGroup = grouped.length ? grouped[grouped.length - 1] : undefined;
-      if (!lastGroup || lastGroup.category !== link.category) {
-        lastGroup = { category: link.category, navLinks: [[]] };
+      if (!lastGroup || lastGroup.category?.id !== link.category?.id) {
+        lastGroup = { category: link.category, navLinks: [] };
         grouped.push(lastGroup);
       }
-      const lastRow = lastGroup.navLinks[lastGroup.navLinks.length - 1];
-      if (lastRow.length < itemsPerRow) {
-        lastRow.push(link);
-      } else {
-        lastGroup.navLinks.push([link]);
-      }
+      lastGroup.navLinks.push(link);
     });
     return grouped;
-  }, [itemsPerRow, navLinks]);
+  }, [navLinks]);
   if (!navLinks.length) {
     return null;
   }
@@ -72,30 +66,23 @@ export const FeatureCards = ({
               </EuiTitle>
             )}
             <EuiSpacer size="m" />
-            {group.navLinks.map((row, rowIndex) => {
-              return (
-                <EuiFlexGroup data-test-subj={`landingPageRow_${rowIndex}`} key={rowIndex}>
-                  {Array.from({ length: itemsPerRow }).map((item, itemIndexInRow) => {
-                    const link = row[itemIndexInRow];
-                    const content = link ? (
-                      <EuiCard
-                        data-test-subj={`landingPageFeature_${link.id}`}
-                        textAlign="left"
-                        title={link.title}
-                        description={link.description || link.title}
-                        onClick={() => navigateToApp(link.id)}
-                        titleSize="xs"
-                      />
-                    ) : null;
-                    return (
-                      <EuiFlexItem key={link?.id || itemIndexInRow} grow={1}>
-                        {content}
-                      </EuiFlexItem>
-                    );
-                  })}
-                </EuiFlexGroup>
-              );
-            })}
+            <EuiFlexGroup wrap>
+              {group.navLinks.map((link, index) => {
+                return (
+                  <EuiFlexItem key={link?.id || index} grow={false}>
+                    <EuiCard
+                      data-test-subj={`landingPageFeature_${link.id}`}
+                      textAlign="left"
+                      title={link.title}
+                      description={link.description || link.title}
+                      onClick={() => navigateToApp(link.id)}
+                      titleSize="xs"
+                      style={{ width: 200 }}
+                    />
+                  </EuiFlexItem>
+                );
+              })}
+            </EuiFlexGroup>
             <EuiSpacer />
           </div>
         ))}