Skip to content

Commit 7d49a06

Browse files
AmirMohammad CheraghaliAmirMohammad Cheraghali
authored andcommitted
fix: Fix Viewer Guide scrolling on mobile
- Added 'min-h-0' to Sidebar and Content Area flex containers - This ensures they respect the parent's fixed height and allow internal scrolling - Prevents content clipping on mobile devices where Flexbox defaults to 'min-height: auto'
1 parent 78d545b commit 7d49a06

1 file changed

Lines changed: 4 additions & 4 deletions

File tree

src/components/HelpGuide.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -371,23 +371,23 @@ export const HelpGuide: React.FC<{ isVisible?: boolean }> = ({ isVisible = true
371371
<div className="relative w-full max-w-5xl h-[85vh] flex flex-col md:flex-row bg-neutral-950 border border-neutral-800 rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
372372

373373
{/* Sidebar */}
374-
<div className={`w-full md:w-64 flex-shrink-0 border-b md:border-b-0 md:border-r border-neutral-800 bg-neutral-900/50 flex-col ${showMobileList ? 'flex' : 'hidden md:flex'}`}>
374+
<div className={`w-full md:w-64 flex-shrink-0 border-b md:border-b-0 md:border-r border-neutral-800 bg-neutral-900/50 flex-col min-h-0 ${showMobileList ? 'flex' : 'hidden md:flex'}`}>
375375
<div className="p-5 border-b border-neutral-800">
376376
<h2 className="text-lg font-bold text-white flex items-center gap-2">
377377
<CircleHelp className="w-5 h-5 text-blue-500" />
378378
User Manual
379379
</h2>
380380
<p className="text-[10px] text-neutral-500 mt-1 uppercase tracking-wider font-semibold">Quercus Viewer v1.0</p>
381381
</div>
382-
<div className="flex-1 overflow-y-auto p-3 space-y-1">
382+
<div className="flex-1 overflow-y-auto p-3 space-y-1 scrollbar-thin scrollbar-thumb-neutral-800">
383383
{features.map(feature => (
384384
<button
385385
key={feature.id}
386386
onClick={() => {
387387
setActiveTab(feature.id);
388388
setShowMobileList(false);
389389
}}
390-
className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-medium transition-all ${activeTab === feature.id && !showMobileList // Highlight only if not looking at list (mobile) logic doesn't apply well, keep simple active state
390+
className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-medium transition-all ${activeTab === feature.id && !showMobileList
391391
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
392392
: activeTab === feature.id
393393
? 'bg-blue-600/10 text-blue-400 md:bg-blue-600 md:text-white md:shadow-lg'
@@ -412,7 +412,7 @@ export const HelpGuide: React.FC<{ isVisible?: boolean }> = ({ isVisible = true
412412
</div>
413413

414414
{/* Content Area */}
415-
<div className={`flex-1 flex-col min-w-0 bg-neutral-900/30 ${showMobileList ? 'hidden md:flex' : 'flex'}`}>
415+
<div className={`flex-1 flex-col min-w-0 min-h-0 bg-neutral-900/30 ${showMobileList ? 'hidden md:flex' : 'flex'}`}>
416416
{/* Header */}
417417
<div className="h-16 flex items-center justify-between px-4 md:px-8 border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-xl shrink-0">
418418
<div className="flex items-center gap-3">

0 commit comments

Comments
 (0)