From a6ff016662373a1b4a53cd29d6a50fd23c85b70d Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Tue, 7 May 2024 10:15:38 +0200
Subject: [PATCH] LandingPage / ImagesTable: Set max width for the ImagesTable

Fixes #933

This applies `isWidthLimited` to the section containing ImagesTable, ensuring the table doesn't get stretched out too much.

The were also two sets of empty tags around ImagesTable return, this removes one of them.
---
 src/Components/ImagesTable/ImagesTable.tsx | 112 ++++++++++-----------
 src/Components/LandingPage/LandingPage.tsx |   2 +-
 2 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx
index eafba730..47875f36 100644
--- a/src/Components/ImagesTable/ImagesTable.tsx
+++ b/src/Components/ImagesTable/ImagesTable.tsx
@@ -180,66 +180,64 @@ const ImagesTable = () => {
 
   return (
     <>
-      <>
-        <ImagesTableToolbar
-          itemCount={itemCount}
-          perPage={perPage}
-          page={page}
-          setPage={setPage}
-          onPerPageSelect={onPerPageSelect}
-        />
-        <Table variant="compact" data-testid="images-table">
-          <Thead>
+      <ImagesTableToolbar
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        setPage={setPage}
+        onPerPageSelect={onPerPageSelect}
+      />
+      <Table variant="compact" data-testid="images-table">
+        <Thead>
+          <Tr>
+            <Th style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }} />
+            <Th>Name</Th>
+            <Th>Updated</Th>
+            <Th>OS</Th>
+            <Th>Target</Th>
+            {experimentalFlag && <Th>Version</Th>}
+            <Th>Status</Th>
+            <Th>Instance</Th>
+            <Th />
+          </Tr>
+        </Thead>
+        {itemCount === 0 && (
+          <Tbody>
             <Tr>
-              <Th style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }} />
-              <Th>Name</Th>
-              <Th>Updated</Th>
-              <Th>OS</Th>
-              <Th>Target</Th>
-              {experimentalFlag && <Th>Version</Th>}
-              <Th>Status</Th>
-              <Th>Instance</Th>
-              <Th />
+              <Td colSpan={12}>
+                <ImagesEmptyState selectedBlueprint={selectedBlueprintId} />
+              </Td>
             </Tr>
-          </Thead>
-          {itemCount === 0 && (
-            <Tbody>
-              <Tr>
-                <Td colSpan={12}>
-                  <ImagesEmptyState selectedBlueprint={selectedBlueprintId} />
-                </Td>
-              </Tr>
-            </Tbody>
-          )}
+          </Tbody>
+        )}
 
-          {composes?.map((compose, rowIndex) => {
-            return (
-              <ImagesTableRow
-                compose={compose}
-                rowIndex={rowIndex}
-                key={compose.id}
-              />
-            );
-          })}
-        </Table>
-        <Toolbar className="pf-u-mb-xl">
-          <ToolbarContent>
-            <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
-              <Pagination
-                variant={PaginationVariant.bottom}
-                itemCount={itemCount}
-                perPage={perPage}
-                page={page}
-                onSetPage={onSetPage}
-                onPerPageSelect={onPerPageSelect}
-                widgetId="compose-pagination-bottom"
-                data-testid="images-pagination-bottom"
-                isCompact
-              />
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-      </>
+        {composes?.map((compose, rowIndex) => {
+          return (
+            <ImagesTableRow
+              compose={compose}
+              rowIndex={rowIndex}
+              key={compose.id}
+            />
+          );
+        })}
+      </Table>
+      <Toolbar className="pf-u-mb-xl">
+        <ToolbarContent>
+          <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+            <Pagination
+              variant={PaginationVariant.bottom}
+              itemCount={itemCount}
+              perPage={perPage}
+              page={page}
+              onSetPage={onSetPage}
+              onPerPageSelect={onPerPageSelect}
+              widgetId="compose-pagination-bottom"
+              data-testid="images-pagination-bottom"
+              isCompact
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
     </>
   );
 };
diff --git a/src/Components/LandingPage/LandingPage.tsx b/src/Components/LandingPage/LandingPage.tsx
index 73d0a932..0737a6c5 100644
--- a/src/Components/LandingPage/LandingPage.tsx
+++ b/src/Components/LandingPage/LandingPage.tsx
@@ -73,7 +73,7 @@ export const LandingPage = () => {
 
   const experimentalImageList = (
     <>
-      <PageSection>
+      <PageSection isWidthLimited>
         {showAlert && <NewAlert setShowAlert={setShowAlert} />}
         <Sidebar hasBorder className="pf-v5-u-background-color-100">
           <SidebarPanel