From 573c372f093a2fee85be8cadc4779d35f1e152dd Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 17 Apr 2024 19:55:42 -0400
Subject: [PATCH] fix: Only show scrollbars on settings table when neccessary

---
 app/components/Header.tsx | 4 +++-
 app/components/Table.tsx  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index f62bdbe49..5122df332 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -5,7 +5,7 @@ import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
+import { depths, hideScrollbars, s } from "@shared/styles";
 import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
@@ -115,6 +115,8 @@ const Wrapper = styled(Flex)<WrapperProps>`
   z-index: ${depths.header};
   position: sticky;
   background: ${s("background")};
+  overflow-y: auto;
+  ${hideScrollbars()}
 
   ${(props) =>
     props.$passThrough
diff --git a/app/components/Table.tsx b/app/components/Table.tsx
index f58ff4047..e264a73e8 100644
--- a/app/components/Table.tsx
+++ b/app/components/Table.tsx
@@ -116,7 +116,7 @@ function Table({
   const showPlaceholder = isLoading && data.length === 0;
 
   return (
-    <div style={{ overflowX: "scroll" }}>
+    <div style={{ overflowX: "auto" }}>
       <Anchor ref={topRef} />
       <InnerTable {...getTableProps()}>
         <thead>