feat: responsive header

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>
-  );
-}
+}