website refactor

apps/website/components/dev/DevToolbar.tsx

@@ -229,7 +229,9 @@ export function DevToolbar() {
 
   if (isMinimized) {
     return (
-      <Stack position="fixed" right={4} bottom={4} zIndex={1000}>
+      <Stack 
+        style={{ position: 'fixed', right: '1rem', bottom: '6rem', zIndex: 1000 }}
+      >
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -243,10 +245,6 @@ export function DevToolbar() {
 
   return (
     <Stack
-      position="fixed"
-      right={4}
-      bottom={24}
-      zIndex={1000}
       width="min(420px, calc(100vw - 2rem))"
       maxHeight="calc(100vh - 2rem)"
       overflow="auto"
@@ -256,6 +254,10 @@ export function DevToolbar() {
       bg="rgba(20, 22, 25, 0.92)"
       padding={3}
       style={{
+        position: 'fixed',
+        right: '1rem',
+        bottom: '6rem',
+        zIndex: 1000,
         boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
         backdropFilter: 'blur(12px)',
         WebkitBackdropFilter: 'blur(12px)',
@@ -277,12 +279,14 @@ export function DevToolbar() {
             onClick={() => setIsExpanded(!isExpanded)}
             variant="ghost"
             size="sm"
+            title={isExpanded ? "Collapse" : "Expand"}
           />
           <IconButton
             icon={X}
             onClick={() => setIsMinimized(true)}
             variant="ghost"
             size="sm"
+            title="Minimize"
           />
         </Stack>
       </Stack>