2 rows on mobile

2026-09-15 17:12:59 -04:00 · 2026-06-07 12:31:44 -04:00
parent 661a4e0f7c
commit a7246120cb
7 changed files with 103 additions and 33 deletions
@@ -11,8 +11,8 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Roomba Rover" />
    <title>Roomba Rover</title>
-    <script type="module" crossorigin src="/assets/index-qVAXPTgS.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CF1W1avm.css">
+    <script type="module" crossorigin src="/assets/index-SVNrchEJ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DgTvYo3x.css">
  </head>
  <body>
    <div id="root"></div>
@@ -102,6 +102,7 @@ function buildModelMessages({
    if (!message || !message.role || !message.content) return;
    message.content.replace("sourceMapping", "");
    message.content.replace("SourceMapping", "");
+    message.content.replace("sourcemapping", "");
    messages.push(message);
  });
  return messages;
@@ -144,16 +144,11 @@ export default function ChatPanel({
  }

  const listClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : 'h-48 overflow-y-auto';
-  const isStackedNickname = nicknameLayout === 'stacked';
-  // The composer stays as one horizontal row because this panel is used as a
-  // dense control strip. The chat input is the only control that should absorb
-  // tight-space pressure, so it gets no minimum width while the surrounding
-  // controls stay compact and predictable.
-  const composerClass = 'flex min-w-0 items-stretch gap-0.5 overflow-hidden';
-  // The nickname editor is deliberately narrow in compact chat bars. Users can
-  // still type longer names, but the field no longer reserves enough width to
-  // crowd out the always-visible TTS controls.
-  const nicknameClass = isStackedNickname ? 'w-[5rem] sm:w-[7rem] shrink-0' : 'w-[5rem] sm:w-[7rem] shrink-0';
+  // The composer class owns the responsive row behavior in CSS. A container
+  // query is used instead of JavaScript so the layout responds to the actual
+  // panel width, which matters because this component appears in sidebars and
+  // mobile layouts that do not map cleanly to viewport breakpoints.
+  const composerClass = 'chat-composer';
  // Native selects include generous built-in padding and try to preserve the
  // width of their longest option. Removing horizontal padding and forcing
  // min-w-0 lets the row stay intact while keeping labels readable.
@@ -179,11 +174,11 @@ export default function ChatPanel({
      </div>
      {!hideInput && (
        <form className={composerClass} onSubmit={handleSend}>
-          <div className={nicknameClass}>
+          <div className="chat-composer-nickname">
            <NicknameForm compact />
          </div>
          <input
-            className="field-input min-w-0 flex-[1_1_0%]"
+            className="field-input chat-composer-input"
            value={draft}
            onChange={(e) => {
              const next = e.target.value;
@@ -209,8 +204,15 @@ export default function ChatPanel({
            placeholder={canChat ? 'Type a message…' : hideSpectatorNotice ? '' : 'Spectators cannot chat'}
            disabled={!canChat}
          />
+          <button
+            type="submit"
+            disabled={!canChat || sending}
+            className="button-dark chat-composer-send disabled:opacity-50"
+          >
+            {sending ? '...' : 'Send'}
+          </button>
          {ttsSupported && (
-            <div className="flex min-w-0 shrink items-center gap-0.5 overflow-hidden">
+            <div className="chat-composer-tts">
              <label className="flex shrink-0 items-center gap-0.5 whitespace-nowrap text-xs text-slate-300">
                <input
                  type="checkbox"
@@ -311,13 +313,6 @@ export default function ChatPanel({
              )}
            </div>
          )}
-          <button
-            type="submit"
-            disabled={!canChat || sending}
-            className="button-dark h-full shrink-0 self-stretch disabled:opacity-50"
-          >
-            {sending ? '...' : 'Send'}
-          </button>
        </form>
      )}
    </CardFrame>
@@ -112,6 +112,80 @@ body {
    @apply px-0.5 py-0.5 text-sm font-medium text-white transition-colors bg-rose-600 hover:bg-rose-500 rounded-md;
  }

+  .chat-composer {
+    /* The chat bar lives in several panel widths, so container queries are more
+       accurate than viewport media queries. The default narrow layout preserves
+       a usable chat row first, then moves all TTS controls to a second row. */
+    container-type: inline-size;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    gap: 0.125rem;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .chat-composer-nickname {
+    /* Keep nickname deliberately compact so the message input and Send button
+       remain usable on mobile while still allowing longer typed nicknames. */
+    flex: 0 0 5rem;
+    min-width: 0;
+    order: 2;
+  }
+
+  .chat-composer-input {
+    /* This input is the pressure valve for the first row. It can shrink to the
+       remaining space, but the TTS controls no longer steal that row on mobile. */
+    flex: 1 1 0%;
+    min-width: 0;
+    order: 1;
+  }
+
+  .chat-composer-send {
+    /* Send must stay with the message input in the narrow two-row layout. */
+    flex: 0 0 auto;
+    align-self: stretch;
+    order: 3;
+  }
+
+  .chat-composer-tts {
+    /* The full-width basis is what creates the second row when the composer is
+       narrow; the controls themselves still remain one compact TTS strip. */
+    display: flex;
+    flex: 1 1 100%;
+    align-items: center;
+    gap: 0.125rem;
+    min-width: 0;
+    overflow: hidden;
+    order: 4;
+  }
+
+  @container (min-width: 44rem) {
+    .chat-composer {
+      /* Once there is enough room for a meaningful message field, all controls
+         return to the single-row desktop layout. */
+      flex-wrap: nowrap;
+    }
+
+    .chat-composer-nickname {
+      flex-basis: 7rem;
+      order: 1;
+    }
+
+    .chat-composer-input {
+      order: 2;
+    }
+
+    .chat-composer-tts {
+      flex: 0 1 auto;
+      order: 3;
+    }
+
+    .chat-composer-send {
+      order: 4;
+    }
+  }
+
 }

@layer utilities {