tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): mobile bottom tab bar and ≥44px logo tap target
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 49s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 56s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 2m6s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Details

Browse Source 
MOB-01: At ≤640px the top inline nav is hidden and replaced by a
fixed bottom tab bar (Search / Compare / Rankings / Admissions) with
icon + label, 56px tap targets, env(safe-area-inset-bottom) padding,
and the Compare count rendered as a badge on the icon. Eliminates
horizontal page overflow on every route (docW was 401–429 at vw 390;
now docW === vw).

MOB-02: Logo link gains a padded hit area so the touch target is
≥44×44 (was 36×36), without resizing the visual mark.

ComparisonToast lifted above the new bottom bar on mobile so the two
do not stack on top of each other. body gets a bottom padding equal
to the bar height + safe-area inset so page content is never hidden.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-05-18 15:26:01 +01:00
parent 976ebe752b
commit 2a8ff29ccd
4 changed files with 208 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/ComparisonToast.module.css
+3 -2
View File
@@ -169,8 +169,9 @@
@media (max-width: 640px) {
.toastContainer {
bottom: 1.5rem;
width: calc(100% - 3rem);
/* Sit above the fixed bottom tab bar (56px + safe-area inset) */
bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 0.75rem);
width: calc(100% - 2rem);
}
.toastContent {