fix: console background color scroll bug (#2709)

Fixes #2698 There were actually two underlying issues fixed here: 1. If you hard scroll down on any page in dark mode, the `<body>` element would not respect dark mode, so you could still see white bg underneath. That's gross. It's fixed now in `index.html`. 2. On the infrastructure page specifically, we never set the page body's overflow behavior to scroll, so instead it would overflow the container. Technically, with 1 fixed, you wouldn't even notice this issue, but it was still worth fixing to future-proof the page.
block · Sep 17, 2024 · c19246a · c19246a
1 parent 39ed291
commit c19246a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/frontend/console/index.html b/frontend/console/index.html
@@ -8,7 +8,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
   </head>
 
-  <body class="bg-white h-full w-full">
+  <body class="bg-white dark:bg-gray-800 h-full w-full">
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/frontend/console/src/features/infrastructure/InfrastructurePage.tsx b/frontend/console/src/features/infrastructure/InfrastructurePage.tsx
@@ -64,7 +64,7 @@ export const InfrastructurePage = () => {
   }
 
   return (
-    <div className='px-6'>
+    <div className='h-full overflow-auto px-6'>
       <Tabs tabs={tabs} initialTabId={currentTab} onTabClick={handleTabClick} />
       <div className='mt-2'>{renderTabContent()}</div>
     </div>