Fix: Consistent background across pages

Ensure all pages share the same background and make the map fullscreen.

src/components/RegionMap.tsx

@@ -165,7 +165,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false }: Region
 
   if (isLoading) {
     return (
-      <div className={`${isCompact ? 'h-full' : 'h-screen'} bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center`}>
+      <div className="h-full w-full bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
         <div className="text-white text-xl">Loading {regionName} data...</div>
       </div>
     );
@@ -173,7 +173,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false }: Region
 
   if (error) {
     return (
-      <div className={`${isCompact ? 'h-full' : 'h-screen'} bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center`}>
+      <div className="h-full w-full bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
         <div className="text-center">
           <h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
           <p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
@@ -260,66 +260,64 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false }: Region
     );
   }
 
-  // Full page mode (original region page) - Make fullscreen
+  // Full page mode - Make truly fullscreen
   return (
-    <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
+    <div className="h-full w-full flex flex-col">
-      <div className="h-full flex flex-col">
+      <Header 
-        <Header 
+        title={regionName}
-          title={regionName}
+        breadcrumbs={[
-          breadcrumbs={[
+          { label: "Universe", path: "/" },
-            { label: "Universe", path: "/" },
+          { label: regionName }
-            { label: regionName }
+        ]}
-          ]}
+      />
-        />
 
-        <div className="flex-1 overflow-hidden">
+      <div className="flex-1 overflow-hidden">
-          <svg
+        <svg
-            ref={svgRef}
+          ref={svgRef}
-            width="100%"
+          width="100%"
-            height="100%"
+          height="100%"
-            viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+          viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
-            className="cursor-grab active:cursor-grabbing"
+          className="cursor-grab active:cursor-grabbing"
-            onMouseDown={handleMouseDown}
+          onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
+          onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
+          onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
+          onMouseLeave={handleMouseUp}
-            onWheel={handleWheel}
+          onWheel={handleWheel}
-          >
+        >
-            <defs>
+          <defs>
-              <filter id="glow">
+            <filter id="glow">
-                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
+              <feGaussianBlur stdDeviation="3" result="coloredBlur" />
-                <feMerge>
+              <feMerge>
-                  <feMergeNode in="coloredBlur" />
+                <feMergeNode in="coloredBlur" />
-                  <feMergeNode in="SourceGraphic" />
+                <feMergeNode in="SourceGraphic" />
-                </feMerge>
+              </feMerge>
-              </filter>
+            </filter>
-            </defs>
+          </defs>
 
-            {/* Render connections */}
+          {/* Render connections */}
-            {processedConnections.map(connection => (
+          {processedConnections.map(connection => (
-              <Connection
+            <Connection
-                key={connection.key}
+              key={connection.key}
-                from={connection.from}
+              from={connection.from}
-                to={connection.to}
+              to={connection.to}
-                color={connection.color}
+              color={connection.color}
-              />
+            />
-            ))}
+          ))}
 
-            {/* Render systems */}
+          {/* Render systems */}
-            {systems?.map((system) => (
+          {systems?.map((system) => (
-              <MapNode
+            <MapNode
-                key={system.solarSystemName}
+              key={system.solarSystemName}
-                id={system.solarSystemName}
+              id={system.solarSystemName}
-                name={system.solarSystemName}
+              name={system.solarSystemName}
-                position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
+              position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
-                onClick={() => handleSystemClick(system.solarSystemName)}
+              onClick={() => handleSystemClick(system.solarSystemName)}
-                type="system"
+              type="system"
-                security={system.security}
+              security={system.security}
-                signatures={system.signatures}
+              signatures={system.signatures}
-              />
+            />
-            ))}
+          ))}
-          </svg>
+        </svg>
-        </div>
       </div>
     </div>
   );

src/pages/Index.tsx

@@ -1,9 +1,10 @@
+
 import { GalaxyMap } from '../components/GalaxyMap';
 import { Header } from '../components/Header';
 
-const Index = () => {
+export const Index = () => {
   return (
-    <div className="h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
+    <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
       <div className="h-full flex flex-col">
         <Header title="Galaxy Map" />
         <div className="flex-1 overflow-hidden">
@@ -13,5 +14,3 @@ const Index = () => {
     </div>
   );
 };
-
-export default Index;

src/pages/RegionPage.tsx

@@ -11,7 +11,7 @@ export const RegionPage = () => {
   
   if (!region) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center">
+      <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center overflow-hidden">
         <div className="text-center">
           <h1 className="text-4xl font-bold text-white mb-4">Region Not Found</h1>
           <p className="text-purple-200 mb-6">The requested region does not exist in our database.</p>
@@ -27,5 +27,9 @@ export const RegionPage = () => {
     );
   }
 
-  return <RegionMap regionName={region} />;
+  return (
+    <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
+      <RegionMap regionName={region} />
+    </div>
+  );
 };

src/pages/SystemView.tsx

@@ -165,7 +165,7 @@ export const SystemView = () => {
   ];
 
   return (
-    <div className="h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
+    <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
       <div className="h-full flex flex-col">
         <Header title={`System: ${system}`} breadcrumbs={breadcrumbs} />