From d1778b9daea8cb666da04c3473d533c315e899fa Mon Sep 17 00:00:00 2001
From: kappa <kappa@inouter.com>
Date: Mon, 19 Jan 2026 10:48:05 +0900
Subject: [PATCH] Fix input alignment and mobile responsiveness

- Set message-input max-width to 70% to match message bubble width
- Add mobile media query: input 95%, message bubble 90%
- Input wrapper uses flex: 1 for proper sizing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/MessageInput.css | 9 ++++++++-
 frontend/src/components/MessageList.css  | 6 ++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MessageInput.css b/frontend/src/components/MessageInput.css
index 8d0b119..dd045c7 100644
--- a/frontend/src/components/MessageInput.css
+++ b/frontend/src/components/MessageInput.css
@@ -3,13 +3,20 @@
   gap: 12px;
   padding: 16px;
   box-sizing: border-box;
+  max-width: 70%;
 }
 
 .message-input .input-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 70%;
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .message-input {
+    max-width: 95%;
+  }
 }
 
 .message-input .char-count {
diff --git a/frontend/src/components/MessageList.css b/frontend/src/components/MessageList.css
index 0001853..e80a1a4 100644
--- a/frontend/src/components/MessageList.css
+++ b/frontend/src/components/MessageList.css
@@ -44,6 +44,12 @@
   gap: 4px;
 }
 
+@media (max-width: 768px) {
+  .message-bubble {
+    max-width: 90%;
+  }
+}
+
 .message.mine .message-bubble {
   background: #e94560;
   border-bottom-right-radius: 4px;