joshua/hope-events
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Lift cookie banner and help button above mobile bottom nav

Browse Source 
The cookie consent banner was fixed at bottom-0 under the z-50 BottomNav, so
on mobile it was hidden. It now sits above the nav (h-16 + safe-area) and
publishes its height as --cookie-banner-h, which HelpFab adds to its offset
so the banner no longer covers the help button either.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
joshua
2026-10-20 12:47:13 +02:00
co-authored by Claude Opus 5.5
parent 5529811119
commit 0b22eca0fb
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/shared/CookieConsent.tsx
+15 -2
View File
@@ -1,6 +1,6 @@
"use client";
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { Cookie } from "lucide-react";
import { getConsent, setConsent } from "@/lib/analytics";
@@ -11,11 +11,24 @@ import { getConsent, setConsent } from "@/lib/analytics";
*/
export function CookieConsent() {
const [show, setShow] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => { setShow(getConsent() === null); }, []);
// Publishes the banner's height as --cookie-banner-h so HelpFab can sit above it.
useEffect(() => {
const el = ref.current;
if (!show || !el) return;
const root = document.documentElement;
const update = () => root.style.setProperty("--cookie-banner-h", `${el.offsetHeight}px`);
update();
const ro = new ResizeObserver(update);
ro.observe(el);
return () => { ro.disconnect(); root.style.removeProperty("--cookie-banner-h"); };
}, [show]);
if (!show) return null;
const choose = (v: "accepted" | "declined") => { setConsent(v); setShow(false); };
return (
<div className="fixed bottom-0 inset-x-0 z-40 p-3 sm:p-4 pointer-events-none" role="region" aria-label="Cookie consent">
// On mobile, sit above BottomNav (fixed, h-16 + safe-area, z-50).
<div ref={ref} className="fixed bottom-[calc(4rem+env(safe-area-inset-bottom))] md:bottom-0 inset-x-0 z-40 p-3 sm:p-4 pointer-events-none" role="region" aria-label="Cookie consent">
<div className="pointer-events-auto max-w-3xl mx-auto bg-white border shadow-lg rounded-xl p-4 flex flex-col sm:flex-row sm:items-center gap-3">
<Cookie className="w-6 h-6 text-brand-600 shrink-0 hidden sm:block" />
<p className="text-sm text-gray-700 flex-1">
frontend/src/components/shared/HelpFab.tsx
+3 -2
View File
@@ -34,8 +34,9 @@ export default function HelpFab() {
type="button"
onClick={openGuide}
aria-label="Help"
// bottom-20 on mobile clears BottomNav (fixed, h-16 + safe-area, z-50).
className="fixed z-40 bottom-20 md:bottom-6 right-4 md:right-6 w-12 h-12 rounded-full bg-brand-600 text-white shadow-lg hover:bg-brand-700 hover:scale-105 hover:shadow-xl active:scale-95 flex items-center justify-center transition-all"
// 5rem on mobile clears BottomNav (fixed, h-16 + safe-area, z-50);
// --cookie-banner-h (set by CookieConsent while it shows) lifts it above the banner.
className="fixed z-40 bottom-[calc(5rem+var(--cookie-banner-h,0px))] md:bottom-[calc(1.5rem+var(--cookie-banner-h,0px))] right-4 md:right-6 w-12 h-12 rounded-full bg-brand-600 text-white shadow-lg hover:bg-brand-700 hover:scale-105 hover:shadow-xl active:scale-95 flex items-center justify-center transition-all"
>
<HelpCircle className="w-6 h-6" />
</button>