website refactor

apps/website/components/dev/DevToolbar.tsx

@@ -229,7 +229,7 @@ export function DevToolbar() {
 
   if (isMinimized) {
     return (
-      <Stack align="end" justify="end">
+      <Stack position="fixed" right={4} bottom={4} zIndex={1000}>
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -242,7 +242,26 @@ export function DevToolbar() {
   }
 
   return (
-    <Stack gap={4}>
+    <Stack
+      position="fixed"
+      right={4}
+      bottom={4}
+      zIndex={1000}
+      width="min(420px, calc(100vw - 2rem))"
+      maxHeight="calc(100vh - 2rem)"
+      overflow="auto"
+      border={true}
+      borderColor="var(--ui-color-border-default)"
+      rounded="xl"
+      bg="rgba(20, 22, 25, 0.92)"
+      padding={3}
+      style={{
+        boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
+        backdropFilter: 'blur(12px)',
+        WebkitBackdropFilter: 'blur(12px)',
+      }}
+      gap={4}
+    >
       {/* Header */}
       <Stack direction="row" align="center" justify="between" gap={4}>
         <Stack direction="row" align="center" gap={2}>