-
-
-
- {dsp.name}
-
-
{dsp.type}
-
+
+
+
+
+ {dsp.name}
+
-
-
- {statusLabel}
-
+
{dsp.type}
-
-
-
- IP address
- -
- {dsp.ip}
-
-
+
+
+
+
-
-
- Port
- - {dsp.port}
-
-
-
-
- Device ID
- -
- {dsp.deviceId || '—'}
-
-
-
-
-
- {dsp.status === 'connected' ? (
-
- ) : (
-
- )}
+ {statusLabel}
+
+
- IP address
+ -
+ {dsp.ip}
+
+
+
+
+
- Port
+ - {dsp.port}
+
+
+
+
- Device ID
+ -
+ {dsp.deviceId || '—'}
+
+
+
+
+
+ {dsp.status === 'connected' ? (
+
+ ) : (
+
+ )}
+
+
);
}
diff --git a/src/components/dsp408/GainSection/GainSection.tsx b/src/components/dsp408/GainSection/GainSection.tsx
index faa10db..b2da21d 100644
--- a/src/components/dsp408/GainSection/GainSection.tsx
+++ b/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 (
-
-
-
{title}
+
+
{title}
-
+
-
+
-
-
-
+
+
);
}
diff --git a/src/components/Slider/VerticalSlider.css b/src/components/dsp408/Slider/VerticalSlider.css
similarity index 69%
rename from src/components/Slider/VerticalSlider.css
rename to src/components/dsp408/Slider/VerticalSlider.css
index 9177cf0..19a7e50 100644
--- a/src/components/Slider/VerticalSlider.css
+++ b/src/components/dsp408/Slider/VerticalSlider.css
@@ -1,9 +1,19 @@
-.gauge-container {
- width: 70px;
- height: 260px;
+.gauge-viewport {
+ container-type: inline-size;
+ container-name: gauge;
- padding-top: 20px;
- padding-bottom: 10px;
+ width: 100%;
+ 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;
- height: 210px;
+ width: 100%;
+ 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-bottom: 2px;
- padding-right: 4px;
- padding-left: 4px;
+ padding-top: 2.857cqw; /* 2px */
+ padding-bottom: 2.857cqw; /* 2px */
+ padding-right: 5.714cqw; /* 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);
diff --git a/src/components/Slider/VerticalSlider.tsx b/src/components/dsp408/Slider/VerticalSlider.tsx
similarity index 67%
rename from src/components/Slider/VerticalSlider.tsx
rename to src/components/dsp408/Slider/VerticalSlider.tsx
index 5caf54e..6bb70e4 100644
--- a/src/components/Slider/VerticalSlider.tsx
+++ b/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 (
-
-
-
- {Array.from({ length: 15 }).map((_, i) => (
-
- ))}
+
+
+
+
+ {Array.from({ length: 15 }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+ {Array.from({ length: 15 }).map((_, i) => (
+
+ ))}
+
-
-
-
+
+ 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();
+ }
+ }}
+ />
+ {unit}
-
-
- {Array.from({ length: 15 }).map((_, i) => (
-
- ))}
-
-
-
-
- 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();
- }
- }}
- />
- {unit}
);
diff --git a/src/components/topbar/Topbar.tsx b/src/components/topbar/Topbar.tsx
index b989fbd..220ffae 100644
--- a/src/components/topbar/Topbar.tsx
+++ b/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';
diff --git a/src/styles/variables.css b/src/variables.css
similarity index 100%
rename from src/styles/variables.css
rename to src/variables.css