feat: connection panel reponsive

src/components/Button/Button.css

@@ -78,3 +78,14 @@
   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

@@ -70,17 +70,22 @@ export default function Button({
   }, [fontSize, children, W]);
 
   const button = (
-    <button
-      type={type}
-      className={`btn btn-${variant} ${className}`}
-      onClick={onClick}
-      disabled={disabled}
-      style={{ width: '100%', height: '100%', fontSize: `${computedFontSize}px`, ...style }}
-      {...props}
-    >
-      {children}
-    </button>
-  );
+  <button
+    type={type}
+    className={`btn btn-${variant} ${className}`}
+    onClick={onClick}
+    disabled={disabled}
+    style={{
+      width: scale ? '100%' : W,
+      height: scale ? '100%' : H,
+      fontSize: `${computedFontSize}px`,
+      ...style,
+    }}
+    {...props}
+  >
+    {children}
+  </button>
+);
 
   if (!scale) return button;