feat: responsive connection section

src/App.tsx

@@ -1,7 +1,7 @@
 import { invoke } from '@tauri-apps/api/core';
 
 import { useState } from 'react';
-import './styles/App.css';
+import './App.css';
 import { DSP, DSPStatus, AppPage } from './types/types';
 import TopBar from './components/Topbar/Topbar';
 import DSPPage from './pages/DspPage/DspPage';

src/components/Led/Led.tsx

@@ -5,10 +5,12 @@ type LedProps = {
   className?: string;
 };
 
-export function Led({ status = 'disconnected', className = '' }: LedProps) {
+function Led({ status = 'disconnected', className = '' }: LedProps) {
   return (
     <span className={['led', className].filter(Boolean).join(' ')}>
       <span className={`led-dot led-dot--${status}`} />
     </span>
   );
 }
+
+export default Led;

src/components/dsp408/ConnectionSection/ConnectionSection.css

@@ -1,64 +1,107 @@
-/* .connection-panel-frame {
+.connection-section {
-  width: 33.333%;
-  height: 33.333%;
-  box-sizing: border-box;
-}
-
-.panel {
   width: 100%;
   height: 100%;
+
   display: flex;
-  flex-direction: column;
+  justify-content: center;
-  box-sizing: border-box;
+  align-items: center;
-  overflow: hidden;
-  position: relative;
 }
 
-.panel-type {
+.connection-panel {
+  width: 340px;
+  display: flex;
+  flex-direction: column;
+}
+
+.connection-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.connection-panel__header-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.connection-panel__title {
+  margin: 0;
+
+  font-size: var(--font-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.connection-panel__type {
   margin-top: var(--space-1);
-  font-size: 12px;
+
+  font-size: var(--font-sm);
   color: var(--text-muted);
   font-family: var(--font-mono);
   letter-spacing: 0.03em;
 }
 
-.panel-header {
+.connection-panel__specs {
+  margin: var(--space-5) 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.connection-panel__spec {
   display: flex;
-  align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
+  align-items: center;
-  min-width: 0;
+  gap: var(--space-3);
 }
 
-.panel-header-text {
+.connection-panel__spec dt {
-  min-width: 0;
+  color: var(--text-muted);
-  flex: 1 1 auto;
+  font-size: var(--font-sm);
 }
 
-.panel-title {
+.connection-panel__spec dd {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   margin: 0;
-  font-size: 18px;
+  color: var(--text-primary);
-  font-weight: var(--font-weight-semibold);
 }
 
-.mono {
+.connection-panel__mono {
+  font-family: var(--font-mono);
+
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.specs {
+.connection-panel__actions {
+  margin-top: auto;
+
+  display: flex;
+  justify-content: flex-end;
+}
+
+.connection-panel__status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+
   flex-shrink: 0;
 }
 
-.connection-section {
+.connection-panel__led {
-  position: absolute;
+  height: 14px;
-  inset: 0;
+  aspect-ratio: 1 / 1;
 
   display: flex;
-  justify-content: center;
   align-items: center;
-} */
+  justify-content: center;
+
+  flex: 0 0 auto;
+}

src/components/dsp408/ConnectionSection/ConnectionSection.tsx

@@ -1,14 +1,10 @@
-// ConnectionPanel.tsx
 import { DSP } from '../../../types/types';
 import Button from '../../Button/Button';
+import Card from '../../Card/Card';
+import Led from '../../Led/Led';
+
 import './ConnectionSection.css';
 
-const DESIGN_WIDTH = 340;
-const DESIGN_HEIGHT = 280;
-
-const BTN_W = 100;
-const BTN_H = 40;
-
 function ConnectionPanel({
   dsp,
   onConnect,
@@ -27,59 +23,58 @@ function ConnectionPanel({
 
   return (
     <div className="connection-section">
-      <div
+      <Card className="connection-panel">
-        className="connection-panel-frame"
+        <div className="connection-panel__header">
-        style={{ '--panel-w': DESIGN_WIDTH, '--panel-h': DESIGN_HEIGHT } as React.CSSProperties}
+          <div className="connection-panel__header-text">
-      >
+            <h1 className="connection-panel__title" title={dsp.name}>
-        <div className="card panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
+              {dsp.name}
-          <div className="panel-header">
+            </h1>
-            <div className="panel-header-text">
-              <h1 className="panel-title" title={dsp.name}>
-                {dsp.name}
-              </h1>
-              <div className="panel-type">{dsp.type}</div>
-            </div>
 
-            <div className="status-block">
+            <div className="connection-panel__type">{dsp.type}</div>
-              <span className={`led led--lg led--${dsp.status}`} />
-              <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
-            </div>
           </div>
 
-          <dl className="specs">
+          <div className="connection-panel__status">
-            <div className="spec">
+            <span className="connection-panel__led">
-              <dt>IP address</dt>
+              <Led status={dsp.status} />
-              <dd className="mono" title={dsp.ip}>
+            </span>
-                {dsp.ip}
-              </dd>
-            </div>
 
-            <div className="spec">
+            <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
-              <dt>Port</dt>
-              <dd className="mono">{dsp.port}</dd>
-            </div>
-
-            <div className="spec">
-              <dt>Device ID</dt>
-              <dd className="mono" title={dsp.deviceId || undefined}>
-                {dsp.deviceId || '—'}
-              </dd>
-            </div>
-          </dl>
-
-          <div className="panel-actions">
-            {dsp.status === 'connected' ? (
-              <Button variant="outline" onClick={onDisconnect}>
-                Disconnect
-              </Button>
-            ) : (
-              <Button variant="primary" onClick={onConnect} disabled={dsp.status === 'connecting'}>
-                {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
-              </Button>
-            )}
           </div>
         </div>
-      </div>
+
+        <dl className="connection-panel__specs">
+          <div className="connection-panel__spec">
+            <dt>IP address</dt>
+            <dd className="connection-panel__mono" title={dsp.ip}>
+              {dsp.ip}
+            </dd>
+          </div>
+
+          <div className="connection-panel__spec">
+            <dt>Port</dt>
+            <dd className="connection-panel__mono">{dsp.port}</dd>
+          </div>
+
+          <div className="connection-panel__spec">
+            <dt>Device ID</dt>
+            <dd className="connection-panel__mono" title={dsp.deviceId || undefined}>
+              {dsp.deviceId || '—'}
+            </dd>
+          </div>
+        </dl>
+
+        <div className="connection-panel__actions">
+          {dsp.status === 'connected' ? (
+            <Button variant="outline" onClick={onDisconnect}>
+              Disconnect
+            </Button>
+          ) : (
+            <Button variant="primary" onClick={onConnect} disabled={dsp.status === 'connecting'}>
+              {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
+            </Button>
+          )}
+        </div>
+      </Card>
     </div>
   );
 }

src/components/dsp408/GainSection/GainSection.tsx

@@ -1,4 +1,4 @@
-import VerticalSlider from '../../Slider/VerticalSlider';
+import VerticalSlider from '../Slider/VerticalSlider';
 import { invoke } from '@tauri-apps/api/core';
 import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
 import { DSP } from '../../../types/types';
@@ -93,33 +93,31 @@ function GainPanel({
 
   return (
     <div className="gain-panel-frame">
-      <AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
+      <div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
-        <div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
+        <div className="gain-panel__title">{title}</div>
-          <div className="gain-panel__title">{title}</div>
 
-          <VerticalSlider
+        <VerticalSlider
-            min={-60}
+          min={-60}
-            max={12}
+          max={12}
-            step={0.5}
+          step={0.5}
-            switchStepValue={-10}
+          switchStepValue={-10}
-            switchStep={0.1}
+          switchStep={0.1}
-            unit=" dB"
+          unit=" dB"
-            onChange={setGain}
+          onChange={setGain}
-          />
+        />
 
-          <Button variant="toggle" className={muted ? 'active-danger' : ''} onClick={toggleMute}>
+        <Button variant="toggle" className={muted ? 'active-danger' : ''} onClick={toggleMute}>
-            {muted ? 'Muted' : 'Mute'}
+          {muted ? 'Muted' : 'Mute'}
-          </Button>
+        </Button>
 
-          <Button
+        <Button
-            variant="toggle"
+          variant="toggle"
-            className={inverted ? 'active-warning' : ''}
+          className={inverted ? 'active-warning' : ''}
-            onClick={toggleInverse}
+          onClick={toggleInverse}
-          >
+        >
-            {inverted ? 'Inverted' : 'Invert'}
+          {inverted ? 'Inverted' : 'Invert'}
-          </Button>
+        </Button>
-        </div>
+      </div>
-      </AutoScale>
     </div>
   );
 }

src/components/dsp408/Slider/VerticalSlider.css

@@ -1,9 +1,19 @@
-.gauge-container {
+.gauge-viewport {
-  width: 70px;
+  container-type: inline-size;
-  height: 260px;
+  container-name: gauge;
 
-  padding-top: 20px;
+  width: 100%;
-  padding-bottom: 10px;
+  aspect-ratio: 70 / 260;
+
+  box-sizing: border-box;
+}
+
+.gauge-container {
+  width: 100%;
+  height: 100%;
+
+  padding-top: 28.571cqw; /* 20px */
+  padding-bottom: 14.286cqw; /* 10px */
 
   display: flex;
   flex-direction: column;
@@ -17,21 +27,23 @@
 .gauge-track {
   position: relative;
 
-  width: 70px;
+  width: 100%;
-  height: 210px;
+  height: 300cqw; /* 210px */
 
   display: flex;
 
   justify-content: center;
   align-items: center;
 
-  margin-bottom: 8px;
+  margin-bottom: 11.429cqw; /* 8px */
+
+  box-sizing: border-box;
 }
 
 .slider {
   position: relative;
 
-  width: 24px;
+  width: 34.286cqw; /* 24px */
   height: 100%;
 
   cursor: pointer;
@@ -48,7 +60,7 @@
 
   transform: translateX(-50%);
 
-  width: 2px;
+  width: 2.857cqw; /* 2px */
 
   height: 100%;
 
@@ -62,7 +74,7 @@
 
   left: 50%;
 
-  width: 18px;
+  width: 25.714cqw; /* 18px */
 
   aspect-ratio: 1;
 
@@ -94,9 +106,9 @@
 }
 
 .ticks span {
-  width: 10px;
+  width: 14.286cqw; /* 10px */
 
-  height: 2px;
+  height: 2.857cqw; /* 2px */
 
   background: var(--border-hairline);
 
@@ -104,22 +116,22 @@
 }
 
 .left {
-  left: 8px;
+  left: 11.429cqw; /* 8px */
 }
 
 .right {
-  right: 8px;
+  right: 11.429cqw; /* 8px */
 }
 
 .value {
   width: 100%;
 
-  margin-top: 4px;
+  margin-top: 5.714cqw; /* 4px */
 
-  padding-top: 2px;
+  padding-top: 2.857cqw; /* 2px */
-  padding-bottom: 2px;
+  padding-bottom: 2.857cqw; /* 2px */
-  padding-right: 4px;
+  padding-right: 5.714cqw; /* 4px */
-  padding-left: 4px;
+  padding-left: 5.714cqw; /* 4px */
 
   box-sizing: border-box;
 
@@ -134,7 +146,7 @@
 
   color: var(--accent-brand);
 
-  font-size: 16px;
+  font-size: 22.857cqw;
 
   font-family: var(--font-ui);
 

src/components/dsp408/Slider/VerticalSlider.tsx

@@ -2,7 +2,10 @@ import { useMemo, useRef, useState, useEffect } from 'react';
 
 import './VerticalSlider.css';
 
-// Design size 260*70
+// Design size 260*70 (height*width) — kept as the reference ratio.
+// All CSS dimensions are expressed in container-query width units (cqw)
+// relative to this DESIGN_WIDTH, so the whole component scales together
+// and preserves this aspect ratio at any rendered size.
 
 const DESIGN_WIDTH = 70;
 
@@ -79,6 +82,9 @@ export default function VerticalSlider({
     return Math.max(minStr.length, maxStr.length) + unit.length;
   }, [min, max, decimals, unit]);
 
+  // Computed in "design pixels" (i.e. assuming the component is rendered at
+  // DESIGN_WIDTH px wide), then converted below to cqw so it scales with
+  // the actual rendered size instead of staying a fixed pixel value.
   const valueFontSize = useMemo(() => {
     const availableWidth = DESIGN_WIDTH - 8;
     const AVG_CHAR_WIDTH_RATIO = 0.6;
@@ -86,6 +92,10 @@ export default function VerticalSlider({
     return Math.min(16, Math.max(8, sizeByWidth));
   }, [maxChars]);
 
+  // Convert the "design px" font size into cqw units relative to the
+  // component's own width, so it scales proportionally with everything else.
+  const valueFontSizeCqw = useMemo(() => (valueFontSize / DESIGN_WIDTH) * 100, [valueFontSize]);
+
   function normalizeValue(input: number) {
     const clamped = Math.min(max, Math.max(min, input));
     const snapped = Math.round(clamped / currentStep) * currentStep;
@@ -192,55 +202,57 @@ export default function VerticalSlider({
   const percent = (value - min) / (max - min);
 
   return (
-    <div className={['gauge-container', className].filter(Boolean).join(' ')} style={style}>
+    <div className={['gauge-viewport', className].filter(Boolean).join(' ')} style={style}>
-      <div className="gauge-track">
+      <div className="gauge-container">
-        <div className="ticks left">
+        <div className="gauge-track">
-          {Array.from({ length: 15 }).map((_, i) => (
+          <div className="ticks left">
-            <span key={i} />
+            {Array.from({ length: 15 }).map((_, i) => (
-          ))}
+              <span key={i} />
+            ))}
+          </div>
+
+          <div
+            className="slider"
+            ref={sliderRef}
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
+            onKeyUp={handleKeyUp}
+            onPointerDown={startDrag}
+            onPointerMove={handlePointerMove}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+          >
+            <div className="track" />
+            <div ref={thumbRef} className="thumb" style={{ bottom: `${percent * 100}%` }} />
+          </div>
+
+          <div className="ticks right">
+            {Array.from({ length: 15 }).map((_, i) => (
+              <span key={i} />
+            ))}
+          </div>
         </div>
 
-        <div
+        <div className="value" style={{ fontSize: `${valueFontSizeCqw}cqw` }}>
-          className="slider"
+          <input
-          ref={sliderRef}
+            ref={inputRef}
-          tabIndex={0}
+            type="text"
-          onKeyDown={handleKeyDown}
+            inputMode="decimal"
-          onKeyUp={handleKeyUp}
+            value={editingText ?? displayValue.toFixed(decimals)}
-          onPointerDown={startDrag}
+            style={{ width: '100%' }}
-          onPointerMove={handlePointerMove}
+            onFocus={() => setEditingText(value.toFixed(decimals))}
-          onPointerUp={endDrag}
+            onChange={(e) => setEditingText(e.target.value)}
-          onPointerCancel={endDrag}
+            onBlur={commitEditing}
-        >
+            onKeyDown={(e) => {
-          <div className="track" />
+              if (e.key === 'Enter') inputRef.current?.blur();
-          <div ref={thumbRef} className="thumb" style={{ bottom: `${percent * 100}%` }} />
+              if (e.key === 'Escape') {
+                setEditingText(null);
+                inputRef.current?.blur();
+              }
+            }}
+          />
+          <span className="value-unit">{unit}</span>
         </div>
-
-        <div className="ticks right">
-          {Array.from({ length: 15 }).map((_, i) => (
-            <span key={i} />
-          ))}
-        </div>
-      </div>
-
-      <div className="value" style={{ fontSize: `${valueFontSize}px` }}>
-        <input
-          ref={inputRef}
-          type="text"
-          inputMode="decimal"
-          value={editingText ?? displayValue.toFixed(decimals)}
-          style={{ width: '100%' }}
-          onFocus={() => setEditingText(value.toFixed(decimals))}
-          onChange={(e) => setEditingText(e.target.value)}
-          onBlur={commitEditing}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') inputRef.current?.blur();
-            if (e.key === 'Escape') {
-              setEditingText(null);
-              inputRef.current?.blur();
-            }
-          }}
-        />
-        <span className="value-unit">{unit}</span>
       </div>
     </div>
   );

src/components/topbar/Topbar.tsx

@@ -3,7 +3,7 @@ import { DSP, AppPage } from '../../types/types';
 import AnimatedLogo from '../../assets/icons/AnimatedLogo';
 import { PlusIcon } from '../../assets/icons/PlusIcon';
 import { CrownIcon } from '../../assets/icons/CrownIcon';
-import { Led } from '../Led/Led';
+import Led from '../Led/Led';
 import { CloseIcon } from '../../assets/icons/CloseIcon';
 
 import './Topbar.css';