From 9dbcd2446749268b23e27620822629e746a26bc8 Mon Sep 17 00:00:00 2001
From: Owen <owenwahlgren@gmail.com>
Date: Wed, 21 Jan 2026 13:50:07 -0500
Subject: [PATCH] fix(console): account for banner height in layout

Updated console layout to use --fd-banner-height CSS variable so the
sidebar and content area correctly position below the sticky banner.
This prevents content from being cut off at the bottom of the viewport
when the banner is visible.

Closes #3728
---
 app/console/layout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/console/layout.tsx b/app/console/layout.tsx
index e72142809d1..33475f35e17 100644
--- a/app/console/layout.tsx
+++ b/app/console/layout.tsx
@@ -17,7 +17,7 @@ function ConsoleContent({ children }: { children: ReactNode }) {
   return (
     <WalletProvider>
       <SidebarProvider
-        className="h-screen overflow-hidden"
+        className="!h-[calc(100vh-var(--fd-banner-height,0px))] !min-h-[calc(100vh-var(--fd-banner-height,0px))] !max-h-[calc(100vh-var(--fd-banner-height,0px))] overflow-hidden"
         style={
           {
             "--sidebar-width": "calc(var(--spacing) * 72)",
@@ -26,9 +26,9 @@ function ConsoleContent({ children }: { children: ReactNode }) {
         }
       >
         <ConsoleSidebar variant="inset" />
-        <SidebarInset className="bg-white dark:bg-gray-800 h-[calc(100vh-1rem)] overflow-hidden m-2">
+        <SidebarInset className="bg-white dark:bg-gray-800 h-[calc(100vh-var(--fd-banner-height,0px)-1rem)] overflow-hidden m-2">
           <SiteHeader />
-          <div className="flex flex-1 flex-col gap-4 p-8 overflow-y-auto h-[calc(100vh-var(--header-height)-1rem)]">
+          <div className="flex flex-1 flex-col gap-4 p-8 overflow-y-auto h-[calc(100vh-var(--fd-banner-height,0px)-var(--header-height)-1rem)]">
             {children}
           </div>
         </SidebarInset>