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

Fix help guide popups overflowing the screen on mobile

Browse Source 
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>
This commit is contained in:
joshua
2026-08-07 01:14:44 +02:00
co-authored by Claude Sonnet 5
parent 1f186d6d2a
commit 51639322e2
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+4
View File
@@ -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
frontend/src/components/shared/HelpGuideModal.tsx
+7 -7
View File
@@ -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" />