From 031c5644e7d6d3068206e7ce4ab6905f1634af20 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 19 Sep 2025 10:38:34 +1000
Subject: [PATCH] fix: add overflow to resizable panels (#38812)

* fix: add overflow

* dismissible footer section
---
 .../interfaces/Linter/LinterDataGrid.tsx      |  9 +++++--
 .../interfaces/Linter/LinterPageFooter.tsx    | 24 +++++++++++++++++--
 .../project/[ref]/advisors/performance.tsx    |  2 +-
 .../pages/project/[ref]/advisors/security.tsx |  2 +-
 packages/common/constants/local-storage.ts    |  2 ++
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
index a7e9c29e8a..ae9bcad47b 100644
--- a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
@@ -166,7 +166,12 @@ const LinterDataGrid = ({
       {selectedLint !== null && (
         <>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={30} maxSize={45} minSize={30} className="bg-studio border-t">
+          <ResizablePanel
+            defaultSize={30}
+            maxSize={45}
+            minSize={30}
+            className="bg-studio border-t flex flex-col h-full"
+          >
             <div className="flex items-center justify-between w-full border-b py-3 px-6">
               <div className="flex items-center gap-2">
                 <h3 className="text-sm m-0">
@@ -176,7 +181,7 @@ const LinterDataGrid = ({
               </div>
               <Button type="text" icon={<X />} onClick={handleSidepanelClose} />
             </div>
-            <div className="p-6">
+            <div className="p-6 flex-grow min-h-0 overflow-y-auto">
               <LintDetail lint={selectedLint} projectRef={ref!} />
             </div>
           </ResizablePanel>
diff --git a/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx b/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
index 65a072ac9e..76bb8b6a3d 100644
--- a/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
@@ -1,3 +1,6 @@
+import { X } from 'lucide-react'
+import { LOCAL_STORAGE_KEYS } from 'common'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { Button, cn } from 'ui'
 import { Markdown } from '../Markdown'
 
@@ -14,8 +17,25 @@ const LinterPageFooter = ({
   refetch,
   hideDbInspectCTA,
 }: LinterPageFooterProps) => {
+  const [showBottomSection, setShowBottomSection] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.LINTER_SHOW_FOOTER,
+    true
+  )
+
+  if (!showBottomSection) {
+    return null
+  }
+
   return (
-    <div className="px-6 py-6 flex gap-x-4 border-t ">
+    <div className="px-6 py-6 flex gap-x-4 border-t relative">
+      <Button
+        className="absolute top-1.5 right-3 px-1.5"
+        type="text"
+        size="tiny"
+        onClick={() => setShowBottomSection(false)}
+      >
+        <X size="14" />
+      </Button>
       <div
         className={cn(hideDbInspectCTA ? 'w-[35%]' : 'w-[33%]', 'flex flex-col gap-y-1 text-sm')}
       >
@@ -64,4 +84,4 @@ const LinterPageFooter = ({
   )
 }
 
-export default LinterPageFooter
+export { LinterPageFooter }
diff --git a/apps/studio/pages/project/[ref]/advisors/performance.tsx b/apps/studio/pages/project/[ref]/advisors/performance.tsx
index ff4321175a..3b0e83b7a2 100644
--- a/apps/studio/pages/project/[ref]/advisors/performance.tsx
+++ b/apps/studio/pages/project/[ref]/advisors/performance.tsx
@@ -6,7 +6,7 @@ import { LINTER_LEVELS } from 'components/interfaces/Linter/Linter.constants'
 import { lintInfoMap } from 'components/interfaces/Linter/Linter.utils'
 import LinterDataGrid from 'components/interfaces/Linter/LinterDataGrid'
 import LinterFilters from 'components/interfaces/Linter/LinterFilters'
-import LinterPageFooter from 'components/interfaces/Linter/LinterPageFooter'
+import { LinterPageFooter } from 'components/interfaces/Linter/LinterPageFooter'
 import AdvisorsLayout from 'components/layouts/AdvisorsLayout/AdvisorsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
diff --git a/apps/studio/pages/project/[ref]/advisors/security.tsx b/apps/studio/pages/project/[ref]/advisors/security.tsx
index cd324bed41..aaa28234f9 100644
--- a/apps/studio/pages/project/[ref]/advisors/security.tsx
+++ b/apps/studio/pages/project/[ref]/advisors/security.tsx
@@ -6,7 +6,7 @@ import { LINTER_LEVELS } from 'components/interfaces/Linter/Linter.constants'
 import { lintInfoMap } from 'components/interfaces/Linter/Linter.utils'
 import LinterDataGrid from 'components/interfaces/Linter/LinterDataGrid'
 import LinterFilters from 'components/interfaces/Linter/LinterFilters'
-import LinterPageFooter from 'components/interfaces/Linter/LinterPageFooter'
+import { LinterPageFooter } from 'components/interfaces/Linter/LinterPageFooter'
 import AdvisorsLayout from 'components/layouts/AdvisorsLayout/AdvisorsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts
index 3572600e27..03d597f036 100644
--- a/packages/common/constants/local-storage.ts
+++ b/packages/common/constants/local-storage.ts
@@ -39,6 +39,7 @@ export const LOCAL_STORAGE_KEYS = {
   CLS_DIFF_WARNING: 'cls-diff-warning-dismissed',
   CLS_SELECT_STAR_WARNING: 'cls-select-star-warning-dismissed',
   QUERY_PERF_SHOW_BOTTOM_SECTION: 'supabase-query-perf-show-bottom-section',
+  LINTER_SHOW_FOOTER: 'supabase-linter-show-footer',
   // Key to track account deletion requests
   ACCOUNT_DELETION_REQUEST: 'supabase-account-deletion-request',
   // Used for storing a user id when sending reports to Sentry. The id is hashed for anonymity.
@@ -110,6 +111,7 @@ const LOCAL_STORAGE_KEYS_ALLOWLIST = [
   LOCAL_STORAGE_KEYS.AI_ASSISTANT_MCP_OPT_IN,
   LOCAL_STORAGE_KEYS.UI_PREVIEW_REALTIME_SETTINGS,
   LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0,
+  LOCAL_STORAGE_KEYS.LINTER_SHOW_FOOTER,
 ]
 
 export function clearLocalStorage() {