feat: responsive header

src/components/Button/Button.css

@@ -1,20 +1,23 @@
 .btn {
-  width: auto;
-  height: 36px;
-  padding: 0 var(--space-4);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-ui);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid transparent;
+  width: 100%;
+  height: 100%;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  transition:
-    background var(--dur-base) var(--ease-standard),
-    border-color var(--dur-base) var(--ease-standard),
-    opacity var(--dur-base) var(--ease-standard);
+
+  box-sizing: border-box;
+
+  padding: 0 var(--space-4);
+
+  border-radius: var(--radius-sm);
+
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 500;
+
+  cursor: pointer;
+  border: 1px solid transparent;
 }
 
 .btn:disabled {
@@ -22,73 +25,25 @@
   cursor: not-allowed;
 }
 
-/* Primary */
 .btn-primary {
   background: var(--accent-brand);
   color: #0d0f12;
 }
 
-.btn-primary:hover:not(:disabled) {
-  background: #6f9bf2;
-}
-
-/* Ghost */
 .btn-ghost {
   background: transparent;
   border-color: var(--border-hairline);
   color: var(--text-muted);
 }
 
-.btn-ghost:hover {
-  color: var(--text-primary);
-  border-color: var(--text-muted);
-}
-
-/* Toggle */
 .btn-toggle {
-  width: 90%;
-  height: 40px;
-  margin: 8px auto;
-  padding: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border-radius: var(--radius-sm);
-
-  /* same as ghost */
   background: transparent;
   border-color: var(--border-hairline);
   color: var(--text-muted);
 }
 
-.btn-toggle:hover {
-  color: var(--text-primary);
-  border-color: var(--text-muted);
-  background: transparent;
-}
-
-/* Active states only */
-.btn-toggle.active-warning {
-  background: var(--accent-connecting);
-  border-color: var(--accent-connecting);
-  color: var(--bg-void);
-}
-
-.btn-toggle.active-danger {
-  background: var(--accent-down);
-  border-color: var(--accent-down);
-  color: var(--text-primary);
-}
-
 .btn-outline {
   background: transparent;
   border-color: var(--border-hairline);
   color: var(--text-muted);
-}
-
-.btn-outline:hover:not(:disabled) {
-  color: var(--text-primary);
-  border-color: var(--text-muted);
-}
+}

src/components/Button/Button.tsx

@@ -1,42 +1,13 @@
-// Button.tsx
 import './Button.css';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import { useMemo } from 'react';
-import AutoScale from '../AutoScale/AutoScale';
 
 type ButtonVariant = 'primary' | 'ghost' | 'toggle' | 'outline';
 
-// Design-space size per variant (same idea as DESIGN_WIDTH/HEIGHT in the slider)
-const DEFAULT_DESIGN_SIZE: Record<ButtonVariant, { width: number; height: number }> = {
-  primary: { width: 90, height: 36 },
-  ghost: { width: 90, height: 36 },
-  toggle: { width: 90, height: 40 },
-  outline: { width: 90, height: 36 },
-};
-
-const MIN_FONT_SIZE = 8;
-const MAX_FONT_SIZE = 16;
-const AVG_CHAR_WIDTH_RATIO = 0.6;
-const HORIZONTAL_PADDING = 12; // reserved px inside the box, keeps text off the edges
-
-function getTextLength(children: ReactNode): number {
-  if (typeof children === 'string' || typeof children === 'number') {
-    return String(children).length;
-  }
-  if (Array.isArray(children)) {
-    return children.reduce((acc: number, c) => acc + getTextLength(c), 0);
-  }
-  return 6; // icons / non-text children: reasonable fallback estimate
-}
-
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   children: ReactNode;
   className?: string;
-  fontSize?: number; // explicit override, in design px — skips auto-calc
-  designWidth?: number; // override default design size if needed
-  designHeight?: number;
-  scale?: boolean; // wrap in AutoScale (default true)
+  fontSize?: number;
 }
 
 export default function Button({
@@ -44,41 +15,18 @@ export default function Button({
   children,
   className = '',
   disabled,
-  onClick,
+  fontSize = 13,
   type = 'button',
-  fontSize,
-  designWidth,
-  designHeight,
-  scale = true,
   style,
   ...props
 }: ButtonProps) {
-  const { width: defaultW, height: defaultH } = DEFAULT_DESIGN_SIZE[variant];
-  const W = designWidth ?? defaultW;
-  const H = designHeight ?? defaultH;
-
-  const computedFontSize = useMemo(() => {
-    if (fontSize !== undefined) return fontSize; // user overload wins, no calc
-
-    const textLength = getTextLength(children);
-    if (textLength === 0) return MAX_FONT_SIZE;
-
-    const availableWidth = W - HORIZONTAL_PADDING;
-    const sizeByWidth = availableWidth / (textLength * AVG_CHAR_WIDTH_RATIO);
-
-    return Math.min(MAX_FONT_SIZE, Math.max(MIN_FONT_SIZE, sizeByWidth));
-  }, [fontSize, children, W]);
-
-  const button = (
+  return (
     <button
       type={type}
       className={`btn btn-${variant} ${className}`}
-      onClick={onClick}
       disabled={disabled}
       style={{
-        width: scale ? '100%' : W,
-        height: scale ? '100%' : H,
-        fontSize: `${computedFontSize}px`,
+        fontSize: `${fontSize}px`,
         ...style,
       }}
       {...props}
@@ -86,12 +34,4 @@ export default function Button({
       {children}
     </button>
   );
-
-  if (!scale) return button;
-
-  return (
-    <AutoScale designWidth={W} designHeight={H}>
-      {button}
-    </AutoScale>
-  );
-}
+}