feat: responsive header

src/components/Led/Led.css

@@ -0,0 +1,58 @@
+/* ---------- LED status dot ---------- */
+
+.led {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* remove flex: 1 and align-self: stretch entirely */
+}
+
+.led-dot {
+  width: 80%;
+  height: 80%;
+
+  border-radius: 50%;
+
+  background: var(--accent-down);
+
+  transition:
+    width var(--dur-base) var(--ease-standard),
+    height var(--dur-base) var(--ease-standard),
+    background var(--dur-base) var(--ease-standard),
+    box-shadow var(--dur-base) var(--ease-standard);
+}
+
+.led-dot--connected {
+  width: 100%;
+  height: 100%;
+
+  background: var(--accent-live);
+  box-shadow: 0 0 6px 1px var(--accent-live);
+}
+
+.led-dot--connecting {
+  background: var(--accent-connecting);
+  box-shadow: 0 0 6px 1px var(--accent-connecting);
+
+  animation: pulse 1s var(--ease-standard) infinite;
+}
+
+.led-dot--disconnected {
+  background: var(--accent-down);
+  box-shadow: 0 0 4px 0 var(--accent-down);
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.25);
+    opacity: 0.7;
+  }
+}

src/components/Led/Led.tsx

@@ -0,0 +1,17 @@
+import "./Led.css"
+
+type LedProps = {
+  status?: 'connected' | 'connecting' | 'disconnected';
+  className?: string;
+};
+
+export function Led({
+  status = 'disconnected',
+  className = '',
+}: LedProps) {
+  return (
+    <span className={['led', className].filter(Boolean).join(' ')}>
+      <span className={`led-dot led-dot--${status}`} />
+    </span>
+  );
+}