From 9ca21b0f7223db19e28dff3a8d5d12eba9264e74 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 28 Sep 2026 16:02:08 +0000
Subject: [PATCH] Tighten mobile conversation gutters

On phones the app shell's px-4, the full-page messages container's 1rem
side padding, and the assistant card's px-4 stacked, putting assistant
text ~48px from the screen edge while the fixed composer sat at 16px.

Below sm, drop the messages container's side padding and the assistant
card's horizontal padding (the card's background matches the page, so
that padding was invisible spacing). Messages now line up with the
composer at the shell's 16px inset. The session skeleton gets the same
treatment. Desktop layout is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017JvdS58zu1zVgJvH9U2ThE
---
 .../chat-container/chat-container.component.css  | 16 ++++++++++++++--
 .../chat-container/chat-container.component.html |  2 +-
 .../message-list/message-list.component.html     |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
index 9ee1b6c87..ae4e98468 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
@@ -80,13 +80,25 @@
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  /* No side padding on phones: the app shell's content box already insets
+     by 1rem there, so adding another 1rem here (plus the assistant card's
+     own padding) left messages ~3rem from the screen edge while the fixed
+     composer sat at 1rem. From sm up the shell's inset grows and this
+     restores the original gutter. */
+  padding-left: 0;
+  padding-right: 0;
   padding-top: 3rem; /* Clear the fixed header (4rem) + small gap */
   padding-bottom: 7.5rem; /* Space for fixed input */
   min-width: 0;
 }
 
+@media (min-width: 640px) {
+  .chat-messages-container.full-page {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
 /* Sidenav-aware positioning for lg screens */
 @media (min-width: 1024px) {
   .chat-input-footer.full-page.sidenav-expanded,
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
index 5982df395..933103c95 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
@@ -22,7 +22,7 @@
 
 <!-- Skeleton loading state -->
 @if (showSkeleton()) {
-  <div class="relative pb-30 pt-16 max-w-[720px] mx-auto px-4 py-6 min-w-0">
+  <div class="relative pb-30 pt-16 max-w-[720px] mx-auto sm:px-4 py-6 min-w-0">
     <div class="min-w-0 animate-fade-in">
       <app-paragraph-skeleton />
     </div>
diff --git a/frontend/ai.client/src/app/session/components/message-list/message-list.component.html b/frontend/ai.client/src/app/session/components/message-list/message-list.component.html
index 271faec7f..840150353 100644
--- a/frontend/ai.client/src/app/session/components/message-list/message-list.component.html
+++ b/frontend/ai.client/src/app/session/components/message-list/message-list.component.html
@@ -33,7 +33,7 @@
           class="group relative min-w-0"
           role="group"
           aria-label="Assistant message with metadata">
-            <div class="rounded-2xl bg-gray-50 px-4 py-3 text-base/6 text-gray-800 dark:bg-gray-900 dark:text-gray-200 overflow-hidden">
+            <div class="rounded-2xl bg-gray-50 px-0 sm:px-4 py-3 text-base/6 text-gray-800 dark:bg-gray-900 dark:text-gray-200 overflow-hidden">
                 <app-assistant-message
                   class="min-w-0 block"
                   [messages]="segment.messages"