Merge pull request #346 from NYPL/main

Merge main into qa
NYPL · Oct 3, 2024 · c6e8d57 · c6e8d57
2 parents 5f49029 + f9aebb3
commit c6e8d57
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -5,11 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+### Hotfix
+
+- Fix Table column widths on Search Results after DS 3.4.0 update (SCC-4299)
+
 ## [1.3.0] 2024-10-3
 
 ### Added
 
-## Hotfix
+### Hotfix
 
 - Fix bug where the "View fewer" button was not appearing when filters weren't applied
 

diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx
@@ -28,18 +28,26 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => {
         }`}
         columnHeaders={tableHeadings}
         // TODO: Review these values with the design team
-        columnStyles={[
-          { minWidth: 350, maxwidth: 350 },
-          { minwidth: 150, maxWidth: 200 },
-          { minwidth: 150, maxWidth: 150 },
-          { minwidth: 150, maxWidth: 150 },
-          { minwidth: 200, maxWidth: 250 },
-          { minwidth: 150, maxWidth: 200 },
-        ]}
+        columnStyles={
+          inSearchResult
+            ? [
+                { width: "33.3%", minWidth: 150, maxWidth: 250 },
+                { width: "33.3%", minWidth: 150, maxWidth: 250 },
+                { width: "33.3%", minWidth: 150, maxWidth: 250 },
+              ]
+            : [
+                { minWidth: 350, maxwidth: 350 },
+                { minwidth: 150, maxWidth: 200 },
+                { minwidth: 150, maxWidth: 150 },
+                { minwidth: 150, maxWidth: 150 },
+                { minwidth: 200, maxWidth: 250 },
+                { minwidth: 150, maxWidth: 200 },
+              ]
+        }
         tableData={tableData}
         showRowDividers={!inSearchResult}
         isScrollable={!isLargerThanMobile}
-        my={{ base: 0, md: "s" }}
+        my={{ base: inSearchResult ? "s" : 0, md: "s" }}
         data-testid={
           !inSearchResult
             ? "bib-details-item-table"

diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss
@@ -27,11 +27,14 @@
     tr {
       border: 0 !important;
 
-      th,
+      th {
+        padding-top: 0;
+        padding-bottom: var(--nypl-space-xxs);
+      }
+
       td {
-        padding: 0;
-        // Meant to be 240 col width + 32 (gap) = 272px
-        width: 272px;
+        padding-top: 0;
+        padding-bottom: 0;
       }
     }
   }