Merge pull request #28 from developerfred/z-index-improve

feat(z-index): add Z-Index Hierarchy

Author: developerfred

src/app/globals.css

@@ -62,6 +62,19 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
+
+	--z-index-base: 1;
+	--z-index-content: 10;
+	--z-index-monaco-editor: 20;
+	--z-index-monaco-widgets: 1000;
+	--z-index-floating-ui: 50;
+	--z-index-overlay: 100;
+	--z-index-modal: 200;
+	--z-index-popover: 300;
+	--z-index-toast: 400;
+	--z-index-tooltip: 500;
+	--z-index-network-indicator: 50;
+	--z-index-mobile-nav: 1001;
 }
 
 [data-theme="dark"] {
@@ -287,6 +300,17 @@ body {
 	.card-compact {
 		padding: 12px !important;
 	}
+
+	.monaco-editor .suggest-widget,
+	.monaco-editor .monaco-hover,
+	.monaco-editor .parameter-hints-widget {
+		z-index: calc(var(--z-index-monaco-widgets) + 100) !important;
+	}
+	
+	
+	.mobile-sidebar {
+		z-index: var(--z-index-mobile-nav);
+	}
 }
 
 @theme inline {
@@ -373,43 +397,86 @@ body {
 
 
 .monaco-editor .suggest-widget {
-  z-index: 1000 !important;
+  z-index: var(--z-index-monaco-widgets) !important;
 }
 
 .monaco-editor .monaco-hover {
-  z-index: 1000 !important;
+  z-index: var(--z-index-monaco-widgets) !important;
 }
 
 .monaco-editor .parameter-hints-widget {
-  z-index: 1000 !important;
+  z-index: var(--z-index-monaco-widgets) !important;
 }
 
 
 .monaco-editor {
   position: relative;
-  z-index: 10;
+  z-index: var(--z-index-monaco-editor);
 }
 
 
 .live-preview-container {
   pointer-events: auto;
   position: relative;
-  z-index: 1;
+  z-index: var(--z-index-content);
 }
 
 
 .editor-container {
   position: relative;
-  z-index: 10;
+  z-index: var(--z-index-monaco-editor);
+  isolation: isolate;
+
 }
 
 .preview-container {
   position: relative;
-  z-index: 1;
+  z-index: var(--z-index-content);
 }
 
 
 .monaco-editor-container,
 .preview-container {
   transition: width 0.3s ease-in-out;
+}
+
+.console-output-panel {
+  position: relative;
+  z-index: var(--z-index-content);
+}
+
+.console-output-toggle {
+  position: relative;
+  z-index: var(--z-index-content);
+}
+
+.loading-indicator-overlay {
+  z-index: var(--z-index-overlay);
+}
+
+.tooltip {
+  z-index: var(--z-index-tooltip);
+}
+
+.popover {
+  z-index: var(--z-index-popover);
+}
+
+.mobile-sidebar-toggle {
+  z-index: var(--z-index-mobile-nav);
+}
+
+.network-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-index-network-indicator);
+}
+
+.dashboard-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-overlay);
+  backdrop-filter: blur(8px);
 }

src/components/Console.tsx

@@ -126,13 +126,15 @@ export default function Console({ outputs, onClear }: ConsoleProps) {
 	);
 
 	return (
-		<Card header={consoleHeader} className="h-1/2 min-h-[220px] flex flex-col">
+		<Card header={consoleHeader} className="h-1/2 min-h-[220px] flex flex-col" style={{ position: "relative", zIndex: "var(--z-index-content)" }}>
 			<div
 				ref={consoleRef}
 				className="flex-1 font-mono text-sm overflow-y-auto -mt-2 -mb-2 p-2"
 				style={{
 					backgroundColor: getColor("surface"),
 					borderRadius: "4px",
+					position: "relative", 
+					zIndex: "var(--z-index-content)" 
 				}}
 			>
 				{outputs.length === 0 ? (

src/components/LivePreview/LivePreviewContainer.tsx

@@ -33,13 +33,14 @@ const LivePreviewContainer: React.FC<LivePreviewContainerProps> = ({
       className={`relative h-full ${className}`}
       style={{
 
-        zIndex: 1,        
+        zIndex: "var(--z-index-content)", 
         padding: "12px",        
         width: "100%",
         height: "100%",        
         backgroundColor: getColor("surface"),        
         borderRadius: "8px",        
-        boxShadow: "inset 0 0 5px rgba(0,0,0,0.05)"
+        boxShadow: "inset 0 0 5px rgba(0,0,0,0.05)",
+        position: "relative"
       }}
     >
       <LivePreview 

src/components/Playground/ConsoleOutputToggle.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import type React from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
 interface ConsoleOutputToggleProps {
 	isCodeOutputVisible: boolean;
 	toggleCodeOutputVisibility: () => void;
+	style?: { position: string; zIndex: string; };
 }
 
 const ConsoleOutputToggle: React.FC<ConsoleOutputToggleProps> = ({
@@ -18,6 +19,10 @@ const ConsoleOutputToggle: React.FC<ConsoleOutputToggleProps> = ({
         bg-surface 
         network-transition group"
 			onClick={toggleCodeOutputVisibility}
+			style={{
+				position: "relative",
+				zIndex: "var(--z-index-content)" 
+			}}
 		>
 			<div className="flex items-center gap-2">
 				<span className="text-sm font-medium text-theme-secondary">

src/components/Playground/Main.tsx

@@ -86,9 +86,12 @@ export default function Main({
 			<ConsoleOutputToggle
 				isCodeOutputVisible={isCodeOutputVisible}
 				toggleCodeOutputVisibility={toggleCodeOutputVisibility}
+				style={{ position: "relative", zIndex: "var(--z-index-content)" }} 
 			/>
 			{isCodeOutputVisible && (
+				<div style={{ position: "relative", zIndex: "var(--z-index-content)" }}> 
 				<Console outputs={outputs} onClear={clearOutput} />
+				</div>
 			)}
 		</>
 	);
@@ -143,7 +146,8 @@ export default function Main({
 							style={{
 								transition: "width 0.3s ease",
 								position: "relative",
-								zIndex: 10 
+								zIndex: "var(--z-index-monaco-editor)",
+								isolation: "isolate" 
 							}}
 						>
 							<div
@@ -175,7 +179,7 @@ export default function Main({
 									transition: "width 0.3s ease",
 									borderColor: getColor("border"),
 									position: "relative",
-									zIndex: 1 
+									zIndex: "var(--z-index-content)" 
 								}}
 							>
 								<div className="flex-grow overflow-auto">

src/components/ui/Card.tsx

@@ -10,6 +10,7 @@ interface CardProps {
 	bordered?: boolean;
 	header?: ReactNode;
 	footer?: ReactNode;
+	style?: { position: string, zIndex: string};
 }
 
 export default function Card({