From 5b8156feca9c049865ab617b4eb949b4896d0179 Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Sun, 4 Oct 2026 11:38:42 +0200
Subject: [PATCH] fix(app): stack comment form buttons in expense detail and
 invite page

---
 app/src/components/ExpenseDetailModal.tsx | 27 ++++++++++++++---------
 app/src/pages/InvitePage.tsx              | 21 ++++++++++--------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/app/src/components/ExpenseDetailModal.tsx b/app/src/components/ExpenseDetailModal.tsx
index b8ae045..9280551 100644
--- a/app/src/components/ExpenseDetailModal.tsx
+++ b/app/src/components/ExpenseDetailModal.tsx
@@ -829,17 +829,22 @@ export function ExpenseDetailModal({ expense: initialExpense, onClose, onDeleted
                 <p className="text-[14px] text-faint py-8 text-center">{t('comments.empty')}</p>
               )}
 
-              <form onSubmit={handleAddComment} className="flex gap-3 items-center mt-6">
-                <Avatar name={user?.username ?? '?'} color={user?.color ?? 'slate'} size="lg" />
-                <div className="flex-1 flex items-center gap-2 rounded-xl border border-app bg-surface px-3.5 py-2">
-                  <input
-                    type="text"
-                    value={commentBody}
-                    maxLength={2000}
-                    onChange={(e) => setCommentBody(e.target.value)}
-                    placeholder={t('comments.placeholder')}
-                    className="flex-1 bg-transparent text-[14px] outline-none placeholder:text-faint"
-                  />
+              {/* Input y boton en dos filas: en movil la fila unica sobrepasa el ancho */}
+              <form onSubmit={handleAddComment} className="mt-6 space-y-2">
+                <div className="flex gap-3 items-center">
+                  <Avatar name={user?.username ?? '?'} color={user?.color ?? 'slate'} size="lg" />
+                  <div className="flex-1 flex items-center rounded-xl border border-app bg-surface px-3.5 py-2">
+                    <input
+                      type="text"
+                      value={commentBody}
+                      maxLength={2000}
+                      onChange={(e) => setCommentBody(e.target.value)}
+                      placeholder={t('comments.placeholder')}
+                      className="flex-1 bg-transparent text-[14px] outline-none placeholder:text-faint"
+                    />
+                  </div>
+                </div>
+                <div className="flex justify-end">
                   <button
                     type="submit"
                     disabled={commentSending || !commentBody.trim()}
diff --git a/app/src/pages/InvitePage.tsx b/app/src/pages/InvitePage.tsx
index e12e099..3453713 100644
--- a/app/src/pages/InvitePage.tsx
+++ b/app/src/pages/InvitePage.tsx
@@ -358,22 +358,25 @@ export default function InvitePage() {
               ) : (
                 <p className="text-[14px] text-faint py-4 text-center">{t('comments.empty')}</p>
               )}
-              <form onSubmit={handleAddComment} className="flex gap-2 items-end">
+              {/* Input y boton en dos filas: en movil la fila unica sobrepasa el ancho */}
+              <form onSubmit={handleAddComment} className="mt-4 space-y-2">
                 <input
                   type="text"
                   value={commentBody}
                   maxLength={2000}
                   onChange={(e) => setCommentBody(e.target.value)}
                   placeholder={t('comments.placeholder')}
-                  className="flex-1 bg-surface2 border border-app rounded-xl px-3 py-2 text-[14px] outline-none focus:border-brand placeholder:text-faint"
+                  className="w-full bg-surface2 border border-app rounded-xl px-3 py-2 text-[14px] outline-none focus:border-brand placeholder:text-faint"
                 />
-                <button
-                  type="submit"
-                  disabled={commentSending || !commentBody.trim()}
-                  className="w-10 h-10 rounded-xl bg-brand text-brandfg flex items-center justify-center hover:brightness-110 disabled:opacity-60 shrink-0"
-                >
-                  <Send className="w-4 h-4" aria-hidden="true" />
-                </button>
+                <div className="flex justify-end">
+                  <button
+                    type="submit"
+                    disabled={commentSending || !commentBody.trim()}
+                    className="w-10 h-10 rounded-xl bg-brand text-brandfg flex items-center justify-center hover:brightness-110 disabled:opacity-60 shrink-0"
+                  >
+                    <Send className="w-4 h-4" aria-hidden="true" />
+                  </button>
+                </div>
               </form>
             </div>
           )}