From e39a79bab039b9924f1f761dcb7ebef1003441b8 Mon Sep 17 00:00:00 2001 From: Tudor Sitaru Date: Mon, 18 May 2026 15:47:02 +0100 Subject: [PATCH] =?UTF-8?q?feat(mobile):=20hide=20ComparisonToast=20?= =?UTF-8?q?=E2=80=94=20Compare=20tab=20badge=20replaces=20it?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MOB-05: With the bottom tab bar's Compare badge now showing the selected count and providing one-tap navigation to /compare, the floating toast becomes redundant chrome on phones — it cost ~70px of permanent vertical space and visually competed with the tab bar right above it. Hide at ≤640px. Per-school removal still works on the /compare page itself. Desktop unaffected. Co-Authored-By: Claude Opus 4.7 --- .../components/ComparisonToast.module.css | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/nextjs-app/components/ComparisonToast.module.css b/nextjs-app/components/ComparisonToast.module.css index 85dce02..d5213e5 100644 --- a/nextjs-app/components/ComparisonToast.module.css +++ b/nextjs-app/components/ComparisonToast.module.css @@ -167,21 +167,12 @@ background: var(--accent-coral-dark, #c9614a); } +/* Hidden on phones — the bottom tab bar's Compare badge already + communicates count + destination, so the toast becomes redundant + chrome that costs ~70px of permanent vertical space. Per-school + removal still lives on the /compare page itself. */ @media (max-width: 640px) { .toastContainer { - /* 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 { - gap: 0; - border-radius: 16px; - padding: 1.25rem; - } - - .toastActions { - width: 100%; - justify-content: space-between; + display: none; } }