Merge branch 'fix/mobile-cookie-banner'

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [1.25.1] - 2026-10-20
+
+### Fixed
+
+- On mobile, the cookie consent banner now sits above the bottom navigation bar instead of being hidden behind it.
+- The floating help button moves up above the cookie consent banner while it is showing, so the banner no longer covers it.
+
 ## [1.25.0] - 2026-10-20
 
 ### Added

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "event-management-backend",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "event-management-backend",
-      "version": "1.25.0",
+      "version": "1.25.1",
       "hasInstallScript": true,
       "dependencies": {
         "@prisma/client": "^5.4.2",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "event-management-backend",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "description": "Event Management System Backend",
   "main": "src/index.js",
   "scripts": {

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hope-events-frontend",
-      "version": "1.25.0",
+      "version": "1.25.1",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@hookform/resolvers": "^5.2.1",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

frontend/src/components/shared/CookieConsent.tsx

@@ -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

@@ -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>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hope-events",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hope-events",
-      "version": "1.25.0",
+      "version": "1.25.1",
       "license": "ISC",
       "devDependencies": {
         "concurrently": "^9.2.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "main": "index.js",
   "scripts": {
     "dev:backend": "cd backend && npm run dev",