From 51639322e23c28e1f16c6ddeaa740166bf12ca65 Mon Sep 17 00:00:00 2001
From: joshua <joshua@crosscode.co.za>
Date: Fri, 7 Aug 2026 01:14:44 +0200
Subject: [PATCH 1/2] Fix help guide popups overflowing the screen on mobile

The popup card had no overall height cap, only the tab content area
did, so the header/quick-links/footer could push the close button off
screen on short mobile viewports. The card is now capped to the
screen height with the header and footer pinned in place, and only
the tab content scrolls internally.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                      |  4 ++++
 frontend/src/components/shared/HelpGuideModal.tsx | 14 +++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ea8c10..b885435 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+### Fixed
+
+- Help guide popups could render taller than the screen on mobile, with no way to reach the close button or "Got it" button: only the tab content area had a height cap, so the header, quick links, and footer weren't accounted for. The whole popup is now capped to the screen height, with just the tab content scrolling internally.
+
 ## [1.5.2] - 2026-08-07
 
 ### Fixed
diff --git a/frontend/src/components/shared/HelpGuideModal.tsx b/frontend/src/components/shared/HelpGuideModal.tsx
index b2f2f94..c69ba9b 100644
--- a/frontend/src/components/shared/HelpGuideModal.tsx
+++ b/frontend/src/components/shared/HelpGuideModal.tsx
@@ -17,10 +17,10 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
       <div className="absolute inset-0 bg-black/40 animate-in fade-in duration-200" onClick={onClose} />
       <div className="absolute inset-0 flex items-center justify-center p-4">
         <div
-          className="w-full max-w-3xl bg-white rounded-2xl shadow-2xl animate-in fade-in zoom-in-95 slide-in-from-bottom-2 duration-200 overflow-hidden"
+          className="w-full max-w-3xl max-h-full bg-white rounded-2xl shadow-2xl animate-in fade-in zoom-in-95 slide-in-from-bottom-2 duration-200 overflow-hidden flex flex-col"
           onClick={e => e.stopPropagation()}
         >
-          <div className="flex items-start justify-between px-5 py-4 border-b bg-gradient-to-r from-brand-50/60 to-white">
+          <div className="flex items-start justify-between px-5 py-4 border-b bg-gradient-to-r from-brand-50/60 to-white shrink-0">
             <div className="flex items-start gap-3">
               <div className="w-9 h-9 rounded-full bg-brand-50 flex items-center justify-center shrink-0">
                 <MessageCircleQuestion className="w-5 h-5 text-brand-600" />
@@ -36,7 +36,7 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
           </div>
 
           {content.quickLinks && content.quickLinks.length > 0 && (
-            <div className="flex flex-wrap gap-2 px-5 py-3 border-b bg-gray-50">
+            <div className="flex flex-wrap gap-2 px-5 py-3 border-b bg-gray-50 shrink-0">
               {content.quickLinks.map(link => (
                 <Link
                   key={link.href}
@@ -51,9 +51,9 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
             </div>
           )}
 
-          <div className="flex flex-col sm:flex-row">
+          <div className="flex flex-col sm:flex-row flex-1 min-h-0 overflow-y-auto sm:overflow-visible">
             {content.tabs.length > 1 && (
-              <nav className="sm:w-56 shrink-0 border-b sm:border-b-0 sm:border-r p-3 space-y-1 bg-gray-50/50">
+              <nav className="sm:w-56 shrink-0 border-b sm:border-b-0 sm:border-r p-3 space-y-1 bg-gray-50/50 sm:overflow-y-auto">
                 {content.tabs.map(t => {
                   const Icon = t.icon;
                   const active = activeTab?.key === t.key;
@@ -72,12 +72,12 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
               </nav>
             )}
 
-            <div className="flex-1 min-w-0 p-5 text-sm text-gray-700 max-h-[60vh] overflow-auto">
+            <div className="flex-1 min-w-0 p-5 text-sm text-gray-700 sm:overflow-y-auto">
               {activeTab?.content}
             </div>
           </div>
 
-          <div className="border-t px-5 py-3 space-y-2 bg-gray-50/50">
+          <div className="border-t px-5 py-3 space-y-2 bg-gray-50/50 shrink-0">
             {content.supportContact && (
               <div className="flex items-center gap-2 text-xs text-gray-500">
                 <Mail className="w-3.5 h-3.5 shrink-0" />

From a0a3dc24163cff2d2ce9025a42297004ad9275e5 Mon Sep 17 00:00:00 2001
From: joshua <joshua@crosscode.co.za>
Date: Fri, 7 Aug 2026 01:16:53 +0200
Subject: [PATCH 2/2] Bump version to 1.5.3

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md          | 2 ++
 backend/package.json  | 2 +-
 frontend/package.json | 2 +-
 package.json          | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b885435..4e815b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [1.5.3] - 2026-08-07
+
 ### Fixed
 
 - Help guide popups could render taller than the screen on mobile, with no way to reach the close button or "Got it" button: only the tab content area had a height cap, so the header, quick links, and footer weren't accounted for. The whole popup is now capped to the screen height, with just the tab content scrolling internally.
diff --git a/backend/package.json b/backend/package.json
index f70c603..7865495 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "event-management-backend",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Event Management System Backend",
   "main": "src/index.js",
   "scripts": {
diff --git a/frontend/package.json b/frontend/package.json
index 6600eb9..57bd399 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
diff --git a/package.json b/package.json
index c5d83d7..ced82db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hope-events",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "main": "index.js",
   "scripts": {
     "dev:backend": "cd backend && npm run dev",