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

@@ -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}

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} />

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}