dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Fix: Remove unnecessary scrollbar on system page

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

85
src/index.css
View File

@@ -1,94 +1,64 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. */
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%; --card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%; --popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%; --primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%; --primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary: 210 40% 96.1%; --secondary-foreground: 222.2 84% 4.9%;
--secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%; --muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent: 210 40% 96.1%; --accent-foreground: 222.2 84% 4.9%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem; --radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
} }
.dark { .dark {
--background: 222.2 84% 4.9%; --background: 222.2 84% 4.9%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
--card: 222.2 84% 4.9%; --card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%; --popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%; --popover-foreground: 210 40% 98%;
--primary: 210 40% 98%; --primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%; --primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%; --secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%; --secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%; --muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%; --muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%; --accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%; --border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%; --ring: 212.7 26.8% 83.9%;
--sidebar-background: 240 5.9% 10%; --chart-1: 220 70% 50%;
--sidebar-foreground: 240 4.8% 95.9%; --chart-2: 160 60% 45%;
--sidebar-primary: 224.3 76.3% 48%; --chart-3: 30 80% 55%;
--sidebar-primary-foreground: 0 0% 100%; --chart-4: 280 65% 60%;
--sidebar-accent: 240 3.7% 15.9%; --chart-5: 340 75% 55%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
} }
} }
@@ -96,8 +66,21 @@
* { * {
@apply border-border; @apply border-border;
} }
html, body {
body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
height: 100vh;
width: 100vw;
overflow: hidden;
margin: 0;
padding: 0;
} }
} body {
font-family: 'Inter', system-ui, sans-serif;
}
#root {
height: 100vh;
width: 100vw;
overflow: hidden;
}
}

64
src/pages/SystemView.tsx
View File

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