From c19246a10eb36d38674714694fdcba4b12e92bde Mon Sep 17 00:00:00 2001
From: Denise Li <dli@squareup.com>
Date: Tue, 17 Sep 2024 16:11:34 -0400
Subject: [PATCH] fix: console background color scroll bug (#2709)
Fixes https://github.com/TBD54566975/ftl/issues/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.
---
frontend/console/index.html | 2 +-
.../console/src/features/infrastructure/InfrastructurePage.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend/console/index.html b/frontend/console/index.html
index 240190cc68..a63b1c4d27 100644
--- 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
index 2c652c96a6..3597d08e7a 100644
--- 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>