[ENG-481] Fix styling for setting scrolling (#237)

* fix styling

* adress PR comments

* fix padding issues

Author: trangdoan982

apps/roam/src/components/settings/Settings.tsx

@@ -28,10 +28,13 @@ import { FeedbackWidget } from "~/components/BirdEatsBugs";
 
 type SectionHeaderProps = {
   children: React.ReactNode;
+  className?: string;
 };
-const SectionHeader = ({ children }: SectionHeaderProps) => {
+const SectionHeader = ({ children, className }: SectionHeaderProps) => {
   return (
-    <div className="bp3-tab-copy mt-4 cursor-default select-none font-bold">
+    <div
+      className={`bp3-tab-copy mt-4 cursor-default select-none font-bold ${className}`}
+    >
       {children}
     </div>
   );
@@ -93,15 +96,41 @@ export const SettingsDialog = ({
       className="relative bg-white"
     >
       <div className={Classes.DIALOG_BODY}>
+        <style>{`
+          .dg-settings-tabs .bp3-tab-list {
+            overflow-y: auto;
+            max-height: 100%;
+            /* Firefox */
+            scrollbar-width: thin;
+            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+            /* Webkit browsers */
+            &::-webkit-scrollbar {
+              width: 6px;
+            }
+            &::-webkit-scrollbar-track {
+              background: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+              background-color: rgba(0, 0, 0, 0.2);
+              border-radius: 3px;
+            }
+          }
+
+          /* Override bp3-tab-copy font-size when text-lg is applied */
+          .bp3-tab-copy.text-lg {
+            font-size: 1.125rem;
+          }
+        `}</style>
         <Tabs
+          className="dg-settings-tabs flex h-full"
           onChange={(id) => setSelectedTabId(id)}
           selectedTabId={selectedTabId}
           vertical={true}
           renderActiveTabPanelOnly={true}
         >
-          <div className="mb-2 text-lg font-semibold text-neutral-dark">
+          <SectionHeader className="text-lg font-semibold text-neutral-dark">
             Personal Settings
-          </div>
+          </SectionHeader>
           <Tab
             id="discourse-graph-home-personal"
             title="Home"
@@ -114,9 +143,9 @@ export const SettingsDialog = ({
             className="mb-8 overflow-y-auto"
             panel={<QuerySettings extensionAPI={extensionAPI} />}
           />
-          <div className="text-lg font-semibold text-neutral-dark">
+          <SectionHeader className="text-lg font-semibold text-neutral-dark">
             Global Settings
-          </div>
+          </SectionHeader>
           <Tab
             id="discourse-graph-home"
             title="Home"