From 283a8d93a44a3e4be53a06d1aa84b030dc82da67 Mon Sep 17 00:00:00 2001
From: Diego Cohen <diego.cohen3@gmail.com>
Date: Thu, 3 Oct 2024 08:52:56 -0400
Subject: [PATCH 1/3] Fix table column widths on mobile

---
 CHANGELOG                               |  6 +++++-
 src/components/ItemTable/ItemTable.tsx  | 25 +++++++++++++++++--------
 styles/components/ItemTable.module.scss | 13 +++++++++----
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 4353e6f4..86763357 100644
--- 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
index feaeece4..6bcc3337 100644
--- a/src/components/ItemTable/ItemTable.tsx
+++ b/src/components/ItemTable/ItemTable.tsx
@@ -7,6 +7,7 @@ import {
 import type ItemTableData from "../../models/ItemTableData"
 import StatusLinks from "./StatusLinks"
 import styles from "../../../styles/components/ItemTable.module.scss"
+import { max } from "underscore"
 
 interface ItemTableProps {
   itemTableData: ItemTableData
@@ -28,14 +29,22 @@ 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}
diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss
index acf9a766..b55d406e 100644
--- a/styles/components/ItemTable.module.scss
+++ b/styles/components/ItemTable.module.scss
@@ -24,14 +24,19 @@
   }
 
   &.inSearchResult {
+    margin: var(--nypl-space-s) 0;
+
     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;
       }
     }
   }

From ddd0984f3e05f8296542ade5956fb6df1b841457 Mon Sep 17 00:00:00 2001
From: Diego Cohen <diego.cohen3@gmail.com>
Date: Thu, 3 Oct 2024 08:54:20 -0400
Subject: [PATCH 2/3] Remove automatically added import statement

---
 src/components/ItemTable/ItemTable.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx
index 6bcc3337..c40c3ff2 100644
--- a/src/components/ItemTable/ItemTable.tsx
+++ b/src/components/ItemTable/ItemTable.tsx
@@ -7,7 +7,6 @@ import {
 import type ItemTableData from "../../models/ItemTableData"
 import StatusLinks from "./StatusLinks"
 import styles from "../../../styles/components/ItemTable.module.scss"
-import { max } from "underscore"
 
 interface ItemTableProps {
   itemTableData: ItemTableData

From d800528770ecffcb0b81f80763c517b2ebe7bb1c Mon Sep 17 00:00:00 2001
From: Diego Cohen <diego.cohen3@gmail.com>
Date: Thu, 3 Oct 2024 09:03:13 -0400
Subject: [PATCH 3/3] Move margin to component

---
 src/components/ItemTable/ItemTable.tsx  | 2 +-
 styles/components/ItemTable.module.scss | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx
index c40c3ff2..b0f1eae4 100644
--- a/src/components/ItemTable/ItemTable.tsx
+++ b/src/components/ItemTable/ItemTable.tsx
@@ -47,7 +47,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => {
         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
index b55d406e..1f7512e2 100644
--- a/styles/components/ItemTable.module.scss
+++ b/styles/components/ItemTable.module.scss
@@ -24,8 +24,6 @@
   }
 
   &.inSearchResult {
-    margin: var(--nypl-space-s) 0;
-
     tr {
       border: 0 !important;