Sotoontech/Vitron-Front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Desktop: sticky-footer layout (remove gray gap above + empty area below footer)

Browse Source 
- 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)
This commit is contained in:
Arda Samadi 2026-06-16 14:46:39 +03:30
parent 030a883327
commit 24449fe5e9
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/MyLayout.tsx
View File

@ -50,12 +50,12 @@ const MyLayout = React.memo(({ children }: { children: React.ReactNode }) => {
const isThread = !!location.pathname.split("threads")[1]; const isThread = !!location.pathname.split("threads")[1];
return ( 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 />} {isDesktopReady && <DesktopHeader />}
<div <div
className={`max-w-md mx-auto bg-WHITE min-h-screen shadow-lg lg:shadow-xl ${ className={`max-w-md mx-auto bg-WHITE min-h-screen shadow-lg lg:shadow-xl ${
expandOnDesktop 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"
: "" : ""
}`} }`}
> >

2
app/components/desktop/DesktopFooter.tsx
View File

@ -36,7 +36,7 @@ const COLUMNS: FooterCol[] = [
*/ */
const DesktopFooter = () => { const DesktopFooter = () => {
return ( 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 className="max-w-[1320px] mx-auto px-8 pt-14 pb-8 grid grid-cols-[1.6fr_1fr_1fr_1fr] gap-10">
<div> <div>
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">