pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix footer floating mid-page on short content pages

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-13 13:59:18 +01:00
parent f676bee400
commit 29a5c84651
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.beans/nuzlocke-tracker-36wg--make-footer-stick-to-bottom-of-viewport.md
View File

@@ -1,10 +1,11 @@
--- ---
# nuzlocke-tracker-36wg # nuzlocke-tracker-36wg
title: Make footer stick to bottom of viewport title: Make footer stick to bottom of viewport
status: todo status: in-progress
type: bug type: bug
priority: normal
created_at: 2026-02-13T07:47:48Z created_at: 2026-02-13T07:47:48Z
updated_at: 2026-02-13T07:47:48Z updated_at: 2026-02-13T12:51:48Z
--- ---
On pages with little content, the footer appears right after the content instead of staying at the bottom of the viewport. The footer should always be at the bottom of the browser window, pushing down when there's enough content but not floating in the middle of the page when content is short (sticky footer pattern). On pages with little content, the footer appears right after the content instead of staying at the bottom of the viewport. The footer should always be at the bottom of the browser window, pushing down when there's enough content but not floating in the middle of the page when content is short (sticky footer pattern).

4
frontend/src/components/Layout.tsx
View File

@@ -5,7 +5,7 @@ export function Layout() {
const [menuOpen, setMenuOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false)
return ( return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100"> <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<nav className="bg-white dark:bg-gray-800 shadow-sm"> <nav className="bg-white dark:bg-gray-800 shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16"> <div className="flex justify-between h-16">
@@ -124,7 +124,7 @@ export function Layout() {
</div> </div>
)} )}
</nav> </nav>
<main> <main className="flex-1">
<Outlet /> <Outlet />
</main> </main>
<footer className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"> <footer className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">