Merge pull request #338 from NYPL/SCC-4264/small-styling-tweaks-follo…

…wing-ds-bump SCC-4264 - Small styling tweaks following DS version bump
NYPL · Oct 1, 2024 · 08fb5c1 · 08fb5c1
2 parents b7e288a + 37f4313
commit 08fb5c1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 31 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Small styling fixes after DS version bump to 3.4.0-rc (SCC-4264)
 - Fix bug where "undefined" appears in the search results heading (SCC-4277)
 - VQA second pass miscellaneous fixes (SCC-4264)
 - Fixed accessibility issue on Bib page where focus moves to Displaying text when filters are controlled via MultiSelect. This will change when dynamic updates are replaced with an apply button (SCC-4246)

diff --git a/src/components/ItemTable/ItemAvailability.tsx b/src/components/ItemTable/ItemAvailability.tsx
@@ -106,6 +106,7 @@ const ItemAvailability = ({ item }: ItemAvailabilityProps) => {
             fontSize: "inherit",
             p: 0,
             height: "auto",
+            textAlign: "left",
           }}
           onClick={() =>
             onContact({

diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx
@@ -1,4 +1,8 @@
-import { Box, Table } from "@nypl/design-system-react-components"
+import {
+  Box,
+  Table,
+  useNYPLBreakpoints,
+} from "@nypl/design-system-react-components"
 
 import type ItemTableData from "../../models/ItemTableData"
 import StatusLinks from "./StatusLinks"
@@ -13,6 +17,8 @@ interface ItemTableProps {
  */
 const ItemTable = ({ itemTableData }: ItemTableProps) => {
   const { tableHeadings, tableData, items, inSearchResult } = itemTableData
+  const { isLargerThanMobile } = useNYPLBreakpoints()
+
   return (
     <Box>
       <Table
@@ -22,6 +28,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => {
         columnHeaders={tableHeadings}
         tableData={tableData}
         showRowDividers={!inSearchResult}
+        isScrollable={!isLargerThanMobile}
         my={{ base: 0, md: "s" }}
         data-testid={
           !inSearchResult

diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss
@@ -1,41 +1,16 @@
 .itemTable {
   margin-top: var(--nypl-space-m);
   margin-bottom: var(--nypl-space-s);
-  width: unset !important;
-
-  thead {
-    margin-bottom: var(--nypl-space-xs);
-  }
 
   tr {
-    th,
-    td,
     td:first-of-type,
     th:first-of-type {
-      text-transform: none;
-      padding: var(--nypl-space-s) 0;
-
-      // These min-widths are here temporarily to fix an issue with the table that causes the Format and Call number columns to appear to narrow
-      // TODO: These can be removed if the issue is addressed in the DS or during VQA.
-      @media screen and (min-width: 600px) {
-        min-width: 80px;
-      }
-
-      @media screen and (min-width: 900px) {
-        min-width: 130px;
-
-        &:first-child {
-          min-width: 370px;
-        }
-      }
+      padding-left: 0;
+    }
 
-      // Fix for extra whitespace added by non-table cell styling on span coming from DS
-      // TODO: Bring this issue up with DS team and potentially fix there
-      > span + span {
-        @media screen and (min-width: 600px) {
-          display: table-cell;
-        }
-      }
+    td:last-of-type,
+    th:last-of-type {
+      padding-right: 0;
     }
   }