From c06f119dcf79b831134c88dc309637f154d6a668 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 31 Aug 2026 17:31:51 +0200
Subject: [PATCH] Fix Control view button layout and responsiveness

The scan/record button row used justify-between, spreading the two
button groups to opposite ends instead of sitting next to each other.
Also made the record-controls row and each device card's header wrap
instead of overflowing on narrow screens.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
---
 components/control/ButtplugConsole.tsx | 2 +-
 components/control/DeviceCard.tsx      | 6 +++---
 components/control/RecordControls.tsx  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/control/ButtplugConsole.tsx b/components/control/ButtplugConsole.tsx
index aad57b6..4d979b5 100644
--- a/components/control/ButtplugConsole.tsx
+++ b/components/control/ButtplugConsole.tsx
@@ -225,7 +225,7 @@ export function ButtplugConsole() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center justify-between gap-4">
+      <div className="flex flex-wrap items-center gap-4">
         <DeviceScanPanel scanning={scanning} onScan={handleScan} onStopScan={() => void stopScanning()} />
         <RecordControls
           active={activeSession !== null}
diff --git a/components/control/DeviceCard.tsx b/components/control/DeviceCard.tsx
index fd08201..71ac450 100644
--- a/components/control/DeviceCard.tsx
+++ b/components/control/DeviceCard.tsx
@@ -37,9 +37,9 @@ export function DeviceCard({
 }: DeviceCardProps) {
   return (
     <Card className="bp-glass">
-      <CardHeader className="flex flex-row items-center justify-between pb-3">
-        <span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
-        <div className="flex items-center gap-3">
+      <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-2 pb-3">
+        <span className="min-w-0 truncate text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
+        <div className="flex shrink-0 items-center gap-3">
           {device.hasBattery &&
             (batteryLevel !== null ? (
               <BatteryIndicator level={batteryLevel} />
diff --git a/components/control/RecordControls.tsx b/components/control/RecordControls.tsx
index beb20be..134b2f4 100644
--- a/components/control/RecordControls.tsx
+++ b/components/control/RecordControls.tsx
@@ -15,7 +15,7 @@ interface RecordControlsProps {
 export function RecordControls({ active, elapsedLabel, disabled, busy, onStart, onEnd }: RecordControlsProps) {
   if (active) {
     return (
-      <div className="flex items-center gap-3">
+      <div className="flex flex-wrap items-center gap-3">
         <span className="flex items-center gap-2 text-sm font-medium">
           <Circle className="bp-pulse size-2.5 fill-destructive text-destructive" />
           Session live · {elapsedLabel}