feat: responsive header

2026-07-24 17:28:40 +02:00
parent 3d7c0d2332
commit e85616eacc
15 changed files with 324 additions and 261 deletions
@@ -31,61 +31,54 @@ function ConnectionPanel({
        className="connection-panel-frame"
        style={{ '--panel-w': DESIGN_WIDTH, '--panel-h': DESIGN_HEIGHT } as React.CSSProperties}
      >
-          <div className="card panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
-            <div className="panel-header">
-              <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">
-                <span className={`led led--lg led--${dsp.status}`} />
-                <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
-              </div>
+        <div className="card panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
+          <div className="panel-header">
+            <div className="panel-header-text">
+              <h1 className="panel-title" title={dsp.name}>
+                {dsp.name}
+              </h1>
+              <div className="panel-type">{dsp.type}</div>
            </div>

-            <dl className="specs">
-              <div className="spec">
-                <dt>IP address</dt>
-                <dd className="mono" title={dsp.ip}>
-                  {dsp.ip}
-                </dd>
-              </div>
-
-              <div className="spec">
-                <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 className="status-block">
+              <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="spec">
+              <dt>IP address</dt>
+              <dd className="mono" title={dsp.ip}>
+                {dsp.ip}
+              </dd>
+            </div>
+
+            <div className="spec">
+              <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>
    </div>
  );