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..b0f1eae4 100644 --- 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 index acf9a766..1f7512e2 100644 --- 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; } } }