feat: connection panel reponsive

src/App.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import './styles/App.css';
 import { DSP, DSPStatus, AppPage } from './types/types';
 import TopBar from './components/topbar/Topbar';
-import DSPPage from './pages/DspPage';
+import DSPPage from './pages/DspPage/DspPage';
 import AddDSPForm from './pages/AddDspPage';
 import { useNotifications } from './hooks/useNotifications';
 import Notifications from './components/Notifications/Notifications';

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

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

src/components/dsp408/ConnectionPanel.tsx

@@ -1,69 +0,0 @@
-import { DSP } from '../../types/types';
-
-function ConnectionPanel({
-  dsp,
-  onConnect,
-  onDisconnect,
-}: {
-  dsp: DSP;
-  onConnect: () => void;
-  onDisconnect: () => void;
-}) {
-  const statusLabel =
-    dsp.status === 'connected'
-      ? 'Connected'
-      : dsp.status === 'connecting'
-        ? 'Connecting…'
-        : 'Disconnected';
-
-  return (
-    <div className="card panel">
-      <div className="panel-header">
-        <div>
-          <h1 className="panel-title">{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>
-
-      <dl className="specs">
-        <div className="spec">
-          <dt>IP address</dt>
-          <dd className="mono">{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">{dsp.deviceId || '—'}</dd>
-        </div>
-      </dl>
-
-      <div className="panel-actions">
-        {dsp.status === 'connected' ? (
-          <button className="btn btn-outline" onClick={onDisconnect}>
-            Disconnect
-          </button>
-        ) : (
-          <button
-            className="btn btn-primary"
-            onClick={onConnect}
-            disabled={dsp.status === 'connecting'}
-          >
-            {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default ConnectionPanel;

src/components/dsp408/ConnectionSection/ConnectionSection.css

@@ -0,0 +1,62 @@
+.connection-panel-frame {
+  width: 33.333%;
+  height: 33.333%;
+  box-sizing: border-box;
+}
+
+.panel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+}
+
+
+.panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0; /* required so children can actually shrink/ellipsize instead of forcing overflow */
+}
+
+.panel-header-text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.panel-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mono {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.specs {
+  flex-shrink: 0;
+}
+
+.panel-actions {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  margin: 0;   /* drop margin-top: auto, no longer needed */
+  padding: 0;  /* drop padding-top: 16px, spacing now handled by right/bottom offsets */
+}
+
+.connection-section {
+  position: absolute;   /* was: fixed — relative to .dsp-content now */
+  inset: 0;              /* replaces top:0; right:0; bottom:0; left:0 */
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/dsp408/ConnectionSection/ConnectionSection.tsx

@@ -0,0 +1,97 @@
+// ConnectionPanel.tsx
+import { DSP } from '../../../types/types';
+import Button from '../../Button/Button';
+import AutoScale from '../../AutoScale/AutoScale';
+import './ConnectionSection.css';
+
+const DESIGN_WIDTH = 340;
+const DESIGN_HEIGHT = 280;
+
+const BTN_W = 100;
+const BTN_H = 40;
+
+function ConnectionPanel({
+  dsp,
+  onConnect,
+  onDisconnect,
+}: {
+  dsp: DSP;
+  onConnect: () => void;
+  onDisconnect: () => void;
+}) {
+  const statusLabel =
+    dsp.status === 'connected'
+      ? 'Connected'
+      : dsp.status === 'connecting'
+        ? 'Connecting…'
+        : 'Disconnected';
+
+  return (
+    <div className='connection-section'>
+    <div
+      className="connection-panel-frame"
+      style={{ '--panel-w': DESIGN_WIDTH, '--panel-h': DESIGN_HEIGHT } as React.CSSProperties}
+    >
+      <AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
+        <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>
+
+          <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" designWidth={BTN_W} designHeight={BTN_H} scale={false} onClick={onDisconnect}>
+                Disconnect
+              </Button>
+            ) : (
+              <Button
+                variant="primary"
+                designWidth={BTN_W}
+                designHeight={BTN_H}
+                scale={false}
+                onClick={onConnect}
+                disabled={dsp.status === 'connecting'}
+              >
+                {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
+              </Button>
+            )}
+          </div>
+        </div>
+      </AutoScale>
+    </div>
+    </div>
+  );
+}
+
+export default ConnectionPanel;

src/components/dsp408/GainSection/GainSection.css

@@ -1,10 +1,10 @@
 :root {
-  --gain-section-height: 50vh; /* your fixed % of screen height */
+  --gain-section-height: 40vh;
 }
 
 .gain-section {
-  position: fixed;
+  position: absolute;   /* was: fixed — now relative to .dsp-content, which is the fixed+inset parent */
-  left: var(--sidebar-width-collapsed);
+  left: 0;               /* was: var(--sidebar-width-collapsed) — .dsp-content already excludes the sidebar */
   right: 0;
   bottom: 0;
 
@@ -18,17 +18,13 @@
   box-sizing: border-box;
   padding: 0 var(--space-4);
 
-  background: var(--bg-void);
+  background: var(--bg-panel);
-
-  transition: left var(--dur-base) var(--ease-standard);
 
   z-index: 20;
+
+  border-top: 1px solid var(--border-hairline);
 }
 
-/* keep it clear of the sidebar when expanded, without lifting React state */
-.app-root:has(.sidebar-rail--expanded) .gain-section {
-  left: var(--sidebar-width-expanded);
-}
 .gain-panels {
   display: flex;
   flex-direction: row;
@@ -72,6 +68,7 @@
   border-radius: var(--radius-md);
   box-sizing: border-box;
   padding: 8px;
+  background: var(--bg-void);
 }
 
 .gain-panel__title {

src/pages/DspPage/DspPage.css

@@ -0,0 +1,13 @@
+.dsp-content {
+  position: fixed;
+  left: var(--sidebar-width-collapsed);
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transition: left var(--dur-base) var(--ease-standard);
+  top: var(--header-height, 0);
+}
+
+.app-root:has(.sidebar-rail--expanded) .dsp-content {
+  left: var(--sidebar-width-expanded);
+}

src/pages/DspPage/DspPage.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { DSP } from '../types/types';
+import { DSP } from '../../types/types';
-import Sidebar from '../components/Sidebar/Sidebar';
+import Sidebar from '../../components/Sidebar/Sidebar';
-import { InfoIcon, SlidersIcon } from '../assets/icons/AudioIcons';
+import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
-import ConnectionPanel from '../components/dsp408/ConnectionPanel';
+import ConnectionPanel from '../../components/dsp408/ConnectionSection/ConnectionSection';
-import GainSection from '../components/dsp408/GainSection/GainSection';
+import GainSection from '../../components/dsp408/GainSection/GainSection';
-import { NotificationType } from '../types/types';
+import { NotificationType } from '../../types/types';
+import './DspPage.css'
 
 function DSPPage({
   dsp,
@@ -47,7 +48,7 @@ function DSPPage({
   };
 
   return (
-    <div className={`dsp-layout app-root ${sidebarExpanded ? 'app-root--sidebar-expanded' : ''}`}>
+    <div className={`app-root ${sidebarExpanded ? 'app-root--sidebar-expanded' : ''}`}>
       <Sidebar
         items={sidebarItems}
         activeId={activeSidebar}