Fix: Remove unnecessary scrollbar on system page

Adjusted the layout to prevent the appearance of an unnecessary scrollbar on the system page by ensuring the body and root elements do not exceed the viewport height.

Fix: Resolve unnecessary scrollbar on system page

Adjusted layout to prevent the appearance of an unnecessary scrollbar and eliminate scrolling to empty space.

Fix:

Ensure the region map maintains its box dimensions on the system page, regardless of content height.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-14 17:02:54 +00:00
committed by PhatPhuckDave
parent 082792f4dc
commit 75efe45cd4
2 changed files with 67 additions and 82 deletions

View File

@@ -186,9 +186,9 @@ const SystemView = () => {
}, [system, cleanMode]);
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
<div className="container mx-auto px-4 py-8">
<div className="text-center mb-8">
<div className="h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
<div className="h-full flex flex-col">
<div className="flex-shrink-0 text-center py-8 px-4">
<h1 className="text-4xl font-bold text-white mb-2">System: {system}</h1>
<div className="flex items-center justify-center gap-4 text-slate-300">
<p>Press Ctrl+V to paste signatures</p>
@@ -205,36 +205,38 @@ const SystemView = () => {
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content - signatures */}
<div className="lg:col-span-2 space-y-6">
<SystemTracker system={system} />
</div>
{/* Regional overview map */}
<div className="lg:col-span-1">
{region ? (
<div className="h-96 border border-purple-500/30 rounded-lg overflow-hidden">
<div className="p-2 border-b border-purple-500/30 bg-black/20 backdrop-blur-sm">
<h3 className="text-white text-sm font-semibold">{region} Region</h3>
<p className="text-purple-200 text-xs">Click systems to navigate Current: {system}</p>
<div className="flex-1 overflow-hidden px-4 pb-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">
{/* Main content - signatures */}
<div className="lg:col-span-2 space-y-6 overflow-y-auto">
<SystemTracker system={system} />
</div>
{/* Regional overview map */}
<div className="lg:col-span-1 flex flex-col">
{region ? (
<div className="h-96 border border-purple-500/30 rounded-lg overflow-hidden flex flex-col">
<div className="flex-shrink-0 p-2 border-b border-purple-500/30 bg-black/20 backdrop-blur-sm">
<h3 className="text-white text-sm font-semibold">{region} Region</h3>
<p className="text-purple-200 text-xs">Click systems to navigate Current: {system}</p>
</div>
<div className="flex-1 min-h-0">
<RegionMap
regionName={region}
focusSystem={system}
isCompact={true}
/>
</div>
</div>
<div className="h-[calc(100%-3rem)]">
<RegionMap
regionName={region}
focusSystem={system}
isCompact={true}
/>
) : (
<div className="bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg p-4 h-96 flex items-center justify-center">
<div className="text-center">
<div className="text-white text-sm">No region information</div>
<div className="text-purple-200 text-xs mt-1">Navigate from a region map to see regional overview</div>
</div>
</div>
</div>
) : (
<div className="bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg p-4 h-96 flex items-center justify-center">
<div className="text-center">
<div className="text-white text-sm">No region information</div>
<div className="text-purple-200 text-xs mt-1">Navigate from a region map to see regional overview</div>
</div>
</div>
)}
)}
</div>
</div>
</div>
</div>