From 24449fe5e9efa5f0e24d9c63032ddf9980edbc4e Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Tue, 16 Jun 2026 14:46:39 +0330
Subject: [PATCH] Desktop: sticky-footer layout (remove gray gap above + empty
 area below footer)

- MyLayout: make the desktop shell a flex column with the content area
  flex-1, so the footer sits flush and pins to the bottom on short pages
- DesktopFooter: drop the mt-24 that exposed the wrapper bg as a gray band
- also fixes the light-gray patches in dark mode (wrapper bg no longer shows)
---
 app/components/MyLayout.tsx              | 4 ++--
 app/components/desktop/DesktopFooter.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/MyLayout.tsx b/app/components/MyLayout.tsx
index bd7a463..b50d91f 100644
--- a/app/components/MyLayout.tsx
+++ b/app/components/MyLayout.tsx
@@ -50,12 +50,12 @@ const MyLayout = React.memo(({ children }: { children: React.ReactNode }) => {
   const isThread = !!location.pathname.split("threads")[1];
 
   return (
-    <div className="min-h-screen bg-gray-100 lg:bg-gray-200">
+    <div className="min-h-screen bg-gray-100 lg:bg-gray-200 lg:flex lg:flex-col">
       {isDesktopReady && <DesktopHeader />}
       <div
         className={`max-w-md mx-auto bg-WHITE min-h-screen shadow-lg lg:shadow-xl ${
           expandOnDesktop
-            ? "lg:max-w-none lg:mx-0 lg:min-h-0 lg:shadow-none"
+            ? "lg:max-w-none lg:mx-0 lg:min-h-0 lg:flex-1 lg:shadow-none"
             : ""
         }`}
       >
diff --git a/app/components/desktop/DesktopFooter.tsx b/app/components/desktop/DesktopFooter.tsx
index 5019d2d..282159f 100644
--- a/app/components/desktop/DesktopFooter.tsx
+++ b/app/components/desktop/DesktopFooter.tsx
@@ -36,7 +36,7 @@ const COLUMNS: FooterCol[] = [
  */
 const DesktopFooter = () => {
   return (
-    <footer className="hidden lg:block mt-24 border-t border-WHITE3 bg-WHITE2">
+    <footer className="hidden lg:block border-t border-WHITE3 bg-WHITE2">
       <div className="max-w-[1320px] mx-auto px-8 pt-14 pb-8 grid grid-cols-[1.6fr_1fr_1fr_1fr] gap-10">
         <div>
           <div className="flex items-center gap-2.5">