From 93cc962b82748259db9eee4a1c73ad76e07fc464 Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Sun, 4 Oct 2026 09:38:42 +0200
Subject: [PATCH 1/5] fix(app): decision solutions readable - actions in two
 rows, attachments only while editing

---
 app/src/components/DecisionModal.tsx | 176 +++++++++++++++------------
 1 file changed, 96 insertions(+), 80 deletions(-)

diff --git a/app/src/components/DecisionModal.tsx b/app/src/components/DecisionModal.tsx
index adf4f89..06d5cb0 100644
--- a/app/src/components/DecisionModal.tsx
+++ b/app/src/components/DecisionModal.tsx
@@ -88,6 +88,8 @@ function AttachmentRow({
       <a
         href={`/api/decisions/attachments/${encodeURIComponent(att.id)}`}
         download={att.filename}
+        // Evita robar el foco al textarea de edicion (lo cerraria en blur)
+        onMouseDown={(e) => e.preventDefault()}
         className="w-7 h-7 rounded-lg text-muted hover:bg-surface2 flex items-center justify-center shrink-0"
         aria-label={t('decisions.attachment.download', { name: att.filename })}
       >
@@ -97,6 +99,7 @@ function AttachmentRow({
         <button
           type="button"
           disabled={deleting}
+          onMouseDown={(e) => e.preventDefault()}
           onClick={() => {
             setDeleting(true);
             void Promise.resolve(onDelete(att)).finally(() => setDeleting(false));
@@ -501,7 +504,9 @@ export function DecisionModal({
               )}
             </div>
 
-            {/* Adjuntos de la decisión: añade cualquier miembro; borra quien subió o admin */}
+            {/* Adjuntos de la decisión: solo visibles mientras se edita la descripción.
+                Añade cualquier miembro; borra quien subió o admin. */}
+            {descEditing && (
             <div>
               {decisionAttachments.length > 0 && (
                 <ul className="space-y-2">
@@ -527,6 +532,8 @@ export function DecisionModal({
               <button
                 type="button"
                 disabled={attUploading}
+                // Evita robar el foco al textarea de edicion (lo cerraria en blur)
+                onMouseDown={(e) => e.preventDefault()}
                 onClick={() => decAttInputRef.current?.click()}
                 className={`w-full flex items-center justify-center gap-2 rounded-xl border border-dashed border-app px-4 py-3 text-[13px] font-medium text-muted hover:bg-surface2 disabled:opacity-60 ${
                   decisionAttachments.length > 0 ? 'mt-2' : ''
@@ -546,6 +553,7 @@ export function DecisionModal({
                 </p>
               )}
             </div>
+            )}
 
             {/* Soluciones */}
             <div>
@@ -604,49 +612,37 @@ export function DecisionModal({
                                   {editError}
                                 </p>
                               )}
-                            </div>
-                          ) : (
-                            <>
-                              <div className="flex items-center gap-2">
-                                <p
-                                  className={`font-medium ${
-                                    s.description
-                                      ? 'text-[17px] font-semibold uppercase'
-                                      : 'text-[15px]'
-                                  }`}
-                                >
-                                  {s.title}
-                                </p>
-                                {chosen && (
-                                  <span className="inline-flex items-center gap-1 rounded-full bg-brand text-brandfg px-2 py-0.5 text-[11px] font-semibold">
-                                    <Check className="w-3 h-3" aria-hidden="true" />
-                                    {t('decisions.modal.chosen')}
-                                  </span>
-                                )}
-                              </div>
-                              {s.description && (
-                                <p className="text-[13px] text-muted mt-0.5 break-words">
-                                  {s.description}
-                                </p>
-                              )}
-                              <p className="text-[12px] text-faint mt-0.5">
-                                {t('decisions.by', { name: s.proposer_username })}
-                              </p>
+                              {/* Adjuntos de la solución: solo visibles mientras se edita */}
                               {detail.attachments.some((a) => a.solution_id === s.id) && (
-                                <ul className="mt-2 space-y-1.5">
+                                <ul className="mt-2 space-y-2">
                                   {detail.attachments
                                     .filter((a) => a.solution_id === s.id)
                                     .map((a) => (
                                       <AttachmentRow
                                         key={a.id}
                                         att={a}
-                                        compact
                                         canDelete={canDeleteAttachment(a)}
                                         onDelete={deleteAttachment}
                                       />
                                     ))}
                                 </ul>
                               )}
+                              <button
+                                type="button"
+                                disabled={attUploading}
+                                // Evita robar el foco al textarea de edicion (lo cerraria en blur)
+                                onMouseDown={(e) => e.preventDefault()}
+                                onClick={() => {
+                                  setSolAttTarget(s.id);
+                                  solAttInputRef.current?.click();
+                                }}
+                                className={`w-full flex items-center justify-center gap-2 rounded-xl border border-dashed border-app px-4 py-2.5 text-[13px] font-medium text-muted hover:bg-surface2 disabled:opacity-60 mt-2`}
+                              >
+                                <Paperclip className="w-4 h-4" aria-hidden="true" />
+                                {attUploading && solAttTarget === s.id
+                                  ? t('decisions.attachment.uploading')
+                                  : t('decisions.attachment.add')}
+                              </button>
                               {solAttError?.solutionId === s.id && (
                                 <p
                                   role="alert"
@@ -655,68 +651,88 @@ export function DecisionModal({
                                   {solAttError.message}
                                 </p>
                               )}
-                            </>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-1.5 shrink-0">
-                          {editingSolutionId !== s.id && (
+                            </div>
+                          ) : (
                             <>
-                              {(s.proposer_id === user?.id || user?.role === 'admin') && (
-                                <>
-                                  <button
-                                    type="button"
-                                    disabled={attUploading}
-                                    onClick={() => {
-                                      setSolAttTarget(s.id);
-                                      solAttInputRef.current?.click();
-                                    }}
-                                    className="w-8 h-8 rounded-lg text-faint hover:text-muted hover:bg-surface flex items-center justify-center disabled:opacity-60"
-                                    aria-label={t('decisions.attachment.add')}
-                                    title={t('decisions.attachment.add')}
+                              {/* Fila superior: titulo + editar */}
+                              <div className="flex items-start gap-1.5">
+                                <div className="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                                  <p
+                                    className={`font-medium break-words ${
+                                      s.description
+                                        ? 'text-[17px] font-semibold uppercase'
+                                        : 'text-[15px]'
+                                    }`}
                                   >
-                                    <Paperclip className="w-3.5 h-3.5" aria-hidden="true" />
-                                  </button>
+                                    {s.title}
+                                  </p>
+                                  {chosen && (
+                                    <span className="inline-flex items-center gap-1 rounded-full bg-brand text-brandfg px-2 py-0.5 text-[11px] font-semibold">
+                                      <Check className="w-3 h-3" aria-hidden="true" />
+                                      {t('decisions.modal.chosen')}
+                                    </span>
+                                  )}
+                                </div>
+                                {(s.proposer_id === user?.id || user?.role === 'admin') && (
                                   <button
                                     type="button"
                                     onClick={() => startEditSolution(s.id, s.title, s.description)}
-                                    className="w-8 h-8 rounded-lg text-faint hover:text-muted hover:bg-surface flex items-center justify-center"
+                                    className="w-8 h-8 rounded-lg text-faint hover:text-muted hover:bg-surface flex items-center justify-center shrink-0"
                                     aria-label={t('decisions.modal.editSolution')}
                                     title={t('decisions.modal.editSolution')}
                                   >
                                     <Pencil className="w-3.5 h-3.5" aria-hidden="true" />
                                   </button>
-                                </>
-                              )}
-                              {decision.status === 'open' && (
-                                <button
-                                  type="button"
-                                  onClick={() => void handleVote(s.id, s.my_vote)}
-                                  className={`inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-[13px] font-semibold transition-colors ${
-                                    s.my_vote
-                                      ? 'bg-brand text-brandfg'
-                                      : 'bg-surface border border-app text-muted hover:bg-surface2'
-                                  }`}
-                                  aria-label={t('decisions.votes', { count: s.votes })}
-                                >
-                                  <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
-                                  {s.votes}
-                                </button>
-                              )}
-                              {decision.status !== 'open' && (
-                                <span className="inline-flex items-center gap-1 text-[13px] font-semibold text-muted">
-                                  <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
-                                  {s.votes}
-                                </span>
+                                )}
+                              </div>
+                              {s.description && (
+                                <p className="text-[13px] text-muted mt-0.5 break-words">
+                                  {s.description}
+                                </p>
                               )}
-                              {decision.status === 'open' && canDecide && (
-                                <button
-                                  type="button"
-                                  onClick={() => setChooseTarget(s.id)}
-                                  className="px-2.5 py-1.5 rounded-lg text-[12px] font-medium bg-surface border border-app text-muted hover:text-brand"
+                              <p className="text-[12px] text-faint mt-0.5">
+                                {t('decisions.by', { name: s.proposer_username })}
+                              </p>
+                              {solAttError?.solutionId === s.id && (
+                                <p
+                                  role="alert"
+                                  className="text-[12px] font-medium text-rose-600 dark:text-rose-400 mt-1"
                                 >
-                                  {t('decisions.modal.choose')}
-                                </button>
+                                  {solAttError.message}
+                                </p>
                               )}
+                              {/* Fila inferior: like + elegir */}
+                              <div className="mt-2.5 pt-2.5 border-t border-app/40 flex items-center gap-2 flex-wrap">
+                                {decision.status === 'open' ? (
+                                  <button
+                                    type="button"
+                                    onClick={() => void handleVote(s.id, s.my_vote)}
+                                    className={`inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-[13px] font-semibold transition-colors ${
+                                      s.my_vote
+                                        ? 'bg-brand text-brandfg'
+                                        : 'bg-surface border border-app text-muted hover:bg-surface2'
+                                    }`}
+                                    aria-label={t('decisions.votes', { count: s.votes })}
+                                  >
+                                    <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
+                                    {s.votes}
+                                  </button>
+                                ) : (
+                                  <span className="inline-flex items-center gap-1 text-[13px] font-semibold text-muted">
+                                    <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
+                                    {s.votes}
+                                  </span>
+                                )}
+                                {decision.status === 'open' && canDecide && (
+                                  <button
+                                    type="button"
+                                    onClick={() => setChooseTarget(s.id)}
+                                    className="px-3 py-1.5 rounded-full text-[13px] font-semibold border border-brand/60 text-brand hover:bg-brand-soft transition-colors"
+                                  >
+                                    {t('decisions.modal.choose')}
+                                  </button>
+                                )}
+                              </div>
                             </>
                           )}
                         </div>

From f764b5bef2863e0b5044fa32731fd9a6507c259d Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Sun, 4 Oct 2026 09:58:15 +0200
Subject: [PATCH 2/5] fix(app): decision solutions - vote beside edit, choose
 floats in text gap

---
 app/src/components/DecisionModal.tsx | 55 ++++++++++++++--------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/app/src/components/DecisionModal.tsx b/app/src/components/DecisionModal.tsx
index 06d5cb0..f1a5eb3 100644
--- a/app/src/components/DecisionModal.tsx
+++ b/app/src/components/DecisionModal.tsx
@@ -654,7 +654,7 @@ export function DecisionModal({
                             </div>
                           ) : (
                             <>
-                              {/* Fila superior: titulo + editar */}
+                              {/* Fila superior: titulo + like + editar */}
                               <div className="flex items-start gap-1.5">
                                 <div className="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
                                   <p
@@ -673,6 +673,26 @@ export function DecisionModal({
                                     </span>
                                   )}
                                 </div>
+                                {decision.status === 'open' ? (
+                                  <button
+                                    type="button"
+                                    onClick={() => void handleVote(s.id, s.my_vote)}
+                                    className={`inline-flex items-center gap-1 shrink-0 rounded-full px-3 py-1.5 text-[13px] font-semibold transition-colors ${
+                                      s.my_vote
+                                        ? 'bg-brand text-brandfg'
+                                        : 'bg-surface border border-app text-muted hover:bg-surface2'
+                                    }`}
+                                    aria-label={t('decisions.votes', { count: s.votes })}
+                                  >
+                                    <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
+                                    {s.votes}
+                                  </button>
+                                ) : (
+                                  <span className="inline-flex items-center gap-1 h-8 shrink-0 px-1 text-[13px] font-semibold text-muted">
+                                    <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
+                                    {s.votes}
+                                  </span>
+                                )}
                                 {(s.proposer_id === user?.id || user?.role === 'admin') && (
                                   <button
                                     type="button"
@@ -690,9 +710,6 @@ export function DecisionModal({
                                   {s.description}
                                 </p>
                               )}
-                              <p className="text-[12px] text-faint mt-0.5">
-                                {t('decisions.by', { name: s.proposer_username })}
-                              </p>
                               {solAttError?.solutionId === s.id && (
                                 <p
                                   role="alert"
@@ -701,33 +718,17 @@ export function DecisionModal({
                                   {solAttError.message}
                                 </p>
                               )}
-                              {/* Fila inferior: like + elegir */}
-                              <div className="mt-2.5 pt-2.5 border-t border-app/40 flex items-center gap-2 flex-wrap">
-                                {decision.status === 'open' ? (
-                                  <button
-                                    type="button"
-                                    onClick={() => void handleVote(s.id, s.my_vote)}
-                                    className={`inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-[13px] font-semibold transition-colors ${
-                                      s.my_vote
-                                        ? 'bg-brand text-brandfg'
-                                        : 'bg-surface border border-app text-muted hover:bg-surface2'
-                                    }`}
-                                    aria-label={t('decisions.votes', { count: s.votes })}
-                                  >
-                                    <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
-                                    {s.votes}
-                                  </button>
-                                ) : (
-                                  <span className="inline-flex items-center gap-1 text-[13px] font-semibold text-muted">
-                                    <ThumbsUp className="w-3.5 h-3.5" aria-hidden="true" />
-                                    {s.votes}
-                                  </span>
-                                )}
+                              {/* Autor + Elegir flotando a la derecha: sin separador,
+                                  encaja en el hueco que deja el texto */}
+                              <div className="mt-0.5 flow-root">
+                                <span className="text-[12px] text-faint leading-6">
+                                  {t('decisions.by', { name: s.proposer_username })}
+                                </span>
                                 {decision.status === 'open' && canDecide && (
                                   <button
                                     type="button"
                                     onClick={() => setChooseTarget(s.id)}
-                                    className="px-3 py-1.5 rounded-full text-[13px] font-semibold border border-brand/60 text-brand hover:bg-brand-soft transition-colors"
+                                    className="float-right px-3 py-1 rounded-full text-[12px] font-semibold border border-brand/60 text-brand hover:bg-brand-soft transition-colors"
                                   >
                                     {t('decisions.modal.choose')}
                                   </button>

From 272e570f8eb7a5e185d79e946a6d63bf6073eaef Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Sun, 4 Oct 2026 10:13:48 +0200
Subject: [PATCH 3/5] fix(app): decision modal fits mobile - shared action row
 and stacked comment form

---
 app/src/components/DecisionModal.tsx | 117 ++++++++++++++-------------
 1 file changed, 63 insertions(+), 54 deletions(-)

diff --git a/app/src/components/DecisionModal.tsx b/app/src/components/DecisionModal.tsx
index f1a5eb3..3838ea9 100644
--- a/app/src/components/DecisionModal.tsx
+++ b/app/src/components/DecisionModal.tsx
@@ -746,7 +746,7 @@ export function DecisionModal({
 
               {/* Proponer solución */}
               {decision.status === 'open' && (
-                <form onSubmit={handlePropose} className="mt-3 space-y-2">
+                <form id="propose-solution" onSubmit={handlePropose} className="mt-3">
                   <textarea
                     value={solutionText}
                     maxLength={5000}
@@ -755,16 +755,50 @@ export function DecisionModal({
                     placeholder={t('decisions.modal.proposePlaceholder')}
                     className="w-full px-3 py-2 rounded-lg bg-surface2 border border-app text-sm outline-none focus:border-brand resize-none"
                   />
+                </form>
+              )}
+              {/* Fila de acciones: proponer + acciones del creador, todas juntas */}
+              <div className="mt-2 flex flex-wrap items-center gap-2">
+                {decision.status === 'open' && (
                   <button
                     type="submit"
+                    form="propose-solution"
                     disabled={proposing || !solutionText.split('\n')[0]?.trim()}
                     className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-brand text-brandfg text-[13px] font-semibold hover:brightness-110 disabled:opacity-60"
                   >
                     <Plus className="w-4 h-4" aria-hidden="true" />
                     {t('decisions.modal.propose')}
                   </button>
-                </form>
-              )}
+                )}
+                {canDecide &&
+                  (decision.status === 'decided' ? (
+                    <button
+                      type="button"
+                      onClick={() => void handleReopen()}
+                      className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium bg-surface border border-app text-muted hover:bg-surface2"
+                    >
+                      <RotateCcw className="w-4 h-4" aria-hidden="true" />
+                      {t('decisions.modal.reopen')}
+                    </button>
+                  ) : (
+                    <>
+                      <button
+                        type="button"
+                        onClick={() => setChooseTarget(null)}
+                        className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium bg-surface border border-app text-muted hover:bg-surface2"
+                      >
+                        {t('decisions.modal.closeWithoutSolution')}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => void handleDelete()}
+                        className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10"
+                      >
+                        {t('common.delete')}
+                      </button>
+                    </>
+                  ))}
+              </div>
               {error && (
                 <p
                   role="alert"
@@ -786,46 +820,18 @@ export function DecisionModal({
               />
             </div>
 
-            {/* Acciones del creador */}
-            {canDecide && (
-              <div className="border-t border-app pt-4 flex flex-wrap items-center gap-2">
-                {decision.status === 'decided' ? (
-                  <button
-                    type="button"
-                    onClick={() => void handleReopen()}
-                    className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium bg-surface border border-app text-muted hover:bg-surface2"
-                  >
-                    <RotateCcw className="w-4 h-4" aria-hidden="true" />
-                    {t('decisions.modal.reopen')}
-                  </button>
-                ) : (
-                  <>
-                    <button
-                      type="button"
-                      onClick={() => setChooseTarget(null)}
-                      className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium bg-surface border border-app text-muted hover:bg-surface2"
-                    >
-                      {t('decisions.modal.closeWithoutSolution')}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => void handleDelete()}
-                      className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10"
-                    >
-                      {t('common.delete')}
-                    </button>
-                  </>
-                )}
-              </div>
-            )}
-
             {/* Comentarios */}
             <div className="border-t border-app pt-4">
-              <p className="text-[12px] font-semibold tracking-wide uppercase text-faint mb-3">
-                {t('decisions.modal.comments')}
-              </p>
-              {comments.length > 0 ? (
-                <ul className="space-y-4">
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-[12px] font-semibold tracking-wide uppercase text-faint">
+                  {t('decisions.modal.comments')}
+                </p>
+                {comments.length === 0 && (
+                  <p className="text-[13px] text-faint">{t('comments.empty')}</p>
+                )}
+              </div>
+              {comments.length > 0 && (
+                <ul className="space-y-4 mt-4">
                   {comments.map((c) => (
                     <li key={c.id} className="flex gap-3">
                       <Avatar name={c.username ?? '?'} color={c.user_color} size="lg" />
@@ -841,21 +847,24 @@ export function DecisionModal({
                     </li>
                   ))}
                 </ul>
-              ) : (
-                <p className="text-[14px] text-faint py-4 text-center">{t('comments.empty')}</p>
               )}
 
-              <form onSubmit={handleAddComment} className="flex gap-3 items-center mt-4">
-                <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={5000}
-                    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-4 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={5000}
+                      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()}

From 5da884beb4109d8f04b9b94de29523bb62c51fdd Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Sun, 4 Oct 2026 10:34:49 +0200
Subject: [PATCH 4/5] fix(app): rename close to short label with armed double
 confirm and neutral dialog

---
 app/src/components/DecisionModal.tsx     | 41 +++++++++++++++++++++---
 app/src/i18n/locales/en/translation.json |  4 ++-
 app/src/i18n/locales/es/translation.json |  4 ++-
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/app/src/components/DecisionModal.tsx b/app/src/components/DecisionModal.tsx
index 3838ea9..b40a958 100644
--- a/app/src/components/DecisionModal.tsx
+++ b/app/src/components/DecisionModal.tsx
@@ -134,6 +134,9 @@ export function DecisionModal({
   const [solutionText, setSolutionText] = useState('');
   const [proposing, setProposing] = useState(false);
   const [chooseTarget, setChooseTarget] = useState<string | null | undefined>(undefined);
+  // Cerrar sin solución: doble confirmación armada (patrón borrado de tarea)
+  const [closeArmed, setCloseArmed] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [commentBody, setCommentBody] = useState('');
   const [commentSending, setCommentSending] = useState(false);
@@ -179,8 +182,13 @@ export function DecisionModal({
     setEditError(null);
     setSolAttError(null);
     setAttError(null);
+    setCloseArmed(false);
   }, [decisionId]);
 
+  useEffect(() => () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+
   useEffect(() => {
     setDescEditing(false);
   }, [decisionId]);
@@ -784,10 +792,25 @@ export function DecisionModal({
                     <>
                       <button
                         type="button"
-                        onClick={() => setChooseTarget(null)}
-                        className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium bg-surface border border-app text-muted hover:bg-surface2"
+                        onClick={() => {
+                          if (closeArmed) {
+                            if (closeTimer.current) clearTimeout(closeTimer.current);
+                            setCloseArmed(false);
+                            setChooseTarget(null);
+                          } else {
+                            setCloseArmed(true);
+                            closeTimer.current = setTimeout(() => setCloseArmed(false), 4000);
+                          }
+                        }}
+                        className={
+                          closeArmed
+                            ? 'inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-semibold text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-500/10 border border-rose-300 dark:border-rose-500/40'
+                            : 'inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-[13px] font-medium bg-surface border border-app text-muted hover:bg-surface2'
+                        }
                       >
-                        {t('decisions.modal.closeWithoutSolution')}
+                        {closeArmed
+                          ? t('decisions.modal.closeArm')
+                          : t('decisions.modal.closeWithoutSolution')}
                       </button>
                       <button
                         type="button"
@@ -898,10 +921,18 @@ export function DecisionModal({
           <div
             role="dialog"
             aria-modal="true"
-            aria-label={t('decisions.modal.choose')}
+            aria-label={
+              chooseTarget === null
+                ? t('decisions.modal.closeWithoutSolution')
+                : t('decisions.modal.choose')
+            }
             className="relative w-[90%] max-w-sm rounded-2xl bg-surface border border-app shadow-2xl p-5"
           >
-            <p className="text-[15px] font-medium">{t('decisions.modal.chooseConfirm')}</p>
+            <p className="text-[15px] font-medium">
+              {chooseTarget === null
+                ? t('decisions.modal.closeConfirm')
+                : t('decisions.modal.chooseConfirm')}
+            </p>
             <div className="mt-4 flex justify-end gap-2">
               <button
                 type="button"
diff --git a/app/src/i18n/locales/en/translation.json b/app/src/i18n/locales/en/translation.json
index acc86d5..e5af411 100644
--- a/app/src/i18n/locales/en/translation.json
+++ b/app/src/i18n/locales/en/translation.json
@@ -742,7 +742,9 @@
       "chosen": "Chosen",
       "choose": "Choose",
       "chooseConfirm": "It may not be the most voted. Confirm choosing this solution?",
-      "closeWithoutSolution": "Close without solution",
+      "closeWithoutSolution": "Close",
+      "closeArm": "Close?",
+      "closeConfirm": "The decision will be closed without a chosen solution.",
       "reopen": "Reopen",
       "comments": "Comments",
       "noSolutions": "No solutions yet. Propose the first one.",
diff --git a/app/src/i18n/locales/es/translation.json b/app/src/i18n/locales/es/translation.json
index 41bfffb..6ffaa67 100644
--- a/app/src/i18n/locales/es/translation.json
+++ b/app/src/i18n/locales/es/translation.json
@@ -742,7 +742,9 @@
       "chosen": "Elegida",
       "choose": "Elegir",
       "chooseConfirm": "Puede no ser la más votada. ¿Confirmas elegir esta solución?",
-      "closeWithoutSolution": "Cerrar sin solución",
+      "closeWithoutSolution": "Cerrar",
+      "closeArm": "¿Cerrar?",
+      "closeConfirm": "La decisión se cerrará sin solución elegida.",
       "reopen": "Reabrir",
       "comments": "Comentarios",
       "noSolutions": "Todavía no hay soluciones. Propón la primera.",

From f46599fd2b6c43a13802e64cc47b76496b9ac48f Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Sun, 4 Oct 2026 10:42:18 +0200
Subject: [PATCH 5/5] fix(app): task comments form stacks button below input on
 narrow screens

---
 app/src/components/task/CommentsTab.tsx | 35 ++++++++++++++-----------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/src/components/task/CommentsTab.tsx b/app/src/components/task/CommentsTab.tsx
index 54aa30d..00a3cec 100644
--- a/app/src/components/task/CommentsTab.tsx
+++ b/app/src/components/task/CommentsTab.tsx
@@ -57,21 +57,26 @@ export function CommentsTab({ detail }: { detail: TaskDetail }) {
         <p className="text-[14px] text-faint py-8 text-center">{t('comments.empty')}</p>
       )}
 
-      <form onSubmit={submit} className="flex gap-3 items-center mt-6">
-        <Avatar name={user.username} color={user.color} size="lg" />
-        <div className="flex-1 flex items-center gap-2 rounded-xl border border-app bg-surface px-3.5 py-2">
-          <label className="sr-only" htmlFor="comment-input">
-            {t('comments.placeholder')}
-          </label>
-          <input
-            id="comment-input"
-            type="text"
-            value={body}
-            maxLength={2000}
-            onChange={(e) => setBody(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={submit} className="mt-6 space-y-2">
+        <div className="flex gap-3 items-center">
+          <Avatar name={user.username} color={user.color} size="lg" />
+          <div className="flex-1 flex items-center rounded-xl border border-app bg-surface px-3.5 py-2">
+            <label className="sr-only" htmlFor="comment-input">
+              {t('comments.placeholder')}
+            </label>
+            <input
+              id="comment-input"
+              type="text"
+              value={body}
+              maxLength={2000}
+              onChange={(e) => setBody(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={sending || !body.trim()}