From 4874b794396accf1ef626bca1da4a6397cea6d6e Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 25 Oct 2026 14:25:26 +0100
Subject: [PATCH] style(triage): rename Als Aufgabe button to Aufgabe with
 wider flex layout and nowrap

---
 frontend/src/features/triage/TriageDeck.tsx | 34 ++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/features/triage/TriageDeck.tsx b/frontend/src/features/triage/TriageDeck.tsx
index 02b6ff5..d9b462f 100644
--- a/frontend/src/features/triage/TriageDeck.tsx
+++ b/frontend/src/features/triage/TriageDeck.tsx
@@ -711,13 +711,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
       )}
 
       {/* Primary Triage Decision Bar: Hidden on mobile (handled via Swipe + Long-Press), shown on Desktop */}
-      <div className="hidden sm:grid sm:grid-cols-6 gap-1.5">
+      <div className="hidden sm:flex items-center gap-1.5">
         <button
           onClick={() => handleAction('discard')}
           title="Wegwerfen (Taste H oder Pfeil links)"
-          className="btn-action h-9 px-2.5 justify-center"
+          className="btn-action flex-1 h-9 px-3 justify-center whitespace-nowrap"
         >
-          <X className="w-3.5 h-3.5 text-muted" />
+          <X className="w-3.5 h-3.5 text-muted flex-shrink-0" />
           <span>Wegwerfen</span>
         </button>
 
@@ -725,11 +725,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           onClick={() => handleSkipCard()}
           disabled={cards.length <= 1}
           title="Später entscheiden – ans Ende schieben (Leertaste)"
-          className={`btn-action h-9 px-2.5 justify-center ${
+          className={`btn-action flex-1 h-9 px-3 justify-center whitespace-nowrap ${
             cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
           }`}
         >
-          <SkipForward className="w-3.5 h-3.5 text-muted" />
+          <SkipForward className="w-3.5 h-3.5 text-muted flex-shrink-0" />
           <span>Später</span>
         </button>
 
@@ -739,20 +739,20 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowListSelector((prev) => !prev);
           }}
           title="Auf eine geteilte Liste setzen"
-          className={`btn-action h-9 px-2.5 justify-center ${
+          className={`btn-action flex-1 h-9 px-3 justify-center whitespace-nowrap ${
             showListSelector ? 'border-accent text-accent bg-accent-dim' : ''
           }`}
         >
-          <ShoppingCart className="w-3.5 h-3.5 text-accent" />
+          <ShoppingCart className="w-3.5 h-3.5 text-accent flex-shrink-0" />
           <span>Auf Liste</span>
         </button>
 
         <button
           onClick={() => handleAction('keep', { convertTo: 'document' })}
           title="In eine Workspace-Notiz umwandeln (Taste D)"
-          className="btn-action h-9 px-2.5 justify-center"
+          className="btn-action flex-1 h-9 px-3 justify-center whitespace-nowrap"
         >
-          <FileText className="w-3.5 h-3.5 text-accent" />
+          <FileText className="w-3.5 h-3.5 text-accent flex-shrink-0" />
           <span>Als Notiz</span>
         </button>
 
@@ -762,21 +762,21 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowDateModal((prev) => !prev);
           }}
           title="Als Aufgabe mit Fälligkeitsdatum (Taste T)"
-          className={`btn-action h-9 px-2.5 justify-center ${
+          className={`btn-action flex-1 h-9 px-3 justify-center whitespace-nowrap ${
             showDateModal ? 'border-accent text-accent bg-accent-dim' : ''
           }`}
         >
-          <Calendar className="w-3.5 h-3.5 text-accent" />
+          <Calendar className="w-3.5 h-3.5 text-accent flex-shrink-0" />
           <span>Mit Termin</span>
         </button>
 
         <button
           onClick={() => handleAction('keep', { convertTo: 'task' })}
           title="Sofort als Aufgabe übernehmen (Taste L oder Pfeil rechts)"
-          className="btn-primary h-9 px-3 justify-center"
+          className="btn-primary flex-[1.25] h-9 px-4 justify-center whitespace-nowrap font-semibold"
         >
-          <CheckSquare className="w-3.5 h-3.5" />
-          <span>Als Aufgabe</span>
+          <CheckSquare className="w-3.5 h-3.5 flex-shrink-0" />
+          <span>Aufgabe</span>
         </button>
       </div>
 
@@ -936,10 +936,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                         thoughtOverride: actionSheetCard,
                       })
                     }
-                    className="min-h-[46px] px-3 py-2 rounded-xl bg-accent text-on-accent text-sm font-semibold flex items-center justify-center gap-2 cursor-pointer"
+                    className="min-h-[46px] px-4 py-2 rounded-xl bg-accent text-on-accent text-sm font-semibold flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer"
                   >
-                    <CheckSquare className="w-4 h-4" />
-                    <span>Als Aufgabe</span>
+                    <CheckSquare className="w-4 h-4 flex-shrink-0" />
+                    <span>Aufgabe</span>
                   </button>
                 </div>
               </div>