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

83
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 components;
@tailwind utilities;
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 84% 4.9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--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;
--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 {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
@@ -96,8 +66,21 @@
* {
@apply border-border;
}
body {
html, body {
@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;
}
}

20
src/pages/SystemView.tsx
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,21 +205,22 @@ const SystemView = () => {
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<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">
<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">
<div className="lg:col-span-1 flex flex-col">
{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">
<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="h-[calc(100%-3rem)]">
<div className="flex-1 min-h-0">
<RegionMap
regionName={region}
focusSystem={system}
@@ -239,6 +240,7 @@ const SystemView = () => {
</div>
</div>
</div>
</div>
);
};