From 81ceb99e6aa5124ad3d0687178cc49f82b5d20f1 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Fri, 10 May 2024 13:14:16 -0400
Subject: [PATCH] fix(app): fix scrollbar style on LPC results table on ODD

Only show scrollbar if content exceeds container. Style scrollbar to be consistent with other
designs.
---
 .../LabwarePositionCheck/ResultsSummary.tsx       | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
index 0dd1bf38e8a..f6a31a28e9f 100644
--- a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
+++ b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { useSelector } from 'react-redux'
 import isEqual from 'lodash/isEqual'
 import { useTranslation } from 'react-i18next'
@@ -25,6 +25,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   LocationIcon,
   MODULE_ICON_NAME_BY_TYPE,
+  OVERFLOW_AUTO,
   PrimaryButton,
   RESPONSIVENESS,
   SPACING,
@@ -155,7 +156,17 @@ export const ResultsSummary = (
       <Flex
         flexDirection={DIRECTION_COLUMN}
         maxHeight="20rem"
-        overflowY="scroll"
+        css={css`
+          overflow-y: ${OVERFLOW_AUTO};
+          &::-webkit-scrollbar {
+            width: 0.75rem;
+            background-color: transparent;
+          }
+          &::-webkit-scrollbar-thumb {
+            background: ${COLORS.grey50};
+            border-radius: 11px;
+          }
+        `}
       >
         <Header>{t('new_labware_offset_data')}</Header>
         {isLabwareOffsetCodeSnippetsOn ? (