From 87efb98bc1bd854406df1f89e09463ab088bf473 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 25 Oct 2026 01:23:47 +0200
Subject: [PATCH] style(header): round quick dump input bar and remove profile
 box outline

---
 frontend/src/App.tsx                                |  8 ++++----
 frontend/src/features/capture/InstantCaptureBar.tsx | 10 +++++-----
 frontend/src/index.css                              |  7 ++++---
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4559960..90b65d7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -319,16 +319,16 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setShowProfileMenu((prev) => !prev);
               }}
-              className="h-8 pl-1 pr-2.5 capture-pill bg-panel hover:bg-panel-elevated border border-border text-xs font-medium text-main flex items-center gap-2 transition-colors"
+              className="h-8 flex items-center gap-2 text-xs font-medium text-main hover:opacity-85 transition-opacity cursor-pointer group"
               title="Benutzermenü öffnen"
             >
-              <div className="w-6 h-6 capture-pill bg-accent text-on-accent text-[10px] font-bold flex items-center justify-center">
+              <div className="w-7 h-7 rounded-full bg-accent text-on-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0">
                 {user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
               </div>
-              <span className="max-w-[120px] truncate hidden sm:inline">
+              <span className="max-w-[130px] truncate hidden sm:inline text-main font-medium">
                 {user.displayName}
               </span>
-              <ChevronDown className="w-3.5 h-3.5 text-muted" />
+              <ChevronDown className="w-3.5 h-3.5 text-muted group-hover:text-main transition-colors" />
             </button>
 
             {showProfileMenu && (
diff --git a/frontend/src/features/capture/InstantCaptureBar.tsx b/frontend/src/features/capture/InstantCaptureBar.tsx
index 832505c..8f0d0a1 100644
--- a/frontend/src/features/capture/InstantCaptureBar.tsx
+++ b/frontend/src/features/capture/InstantCaptureBar.tsx
@@ -212,13 +212,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
       <form ref={containerRef} onSubmit={handleSubmit} className="relative">
         {/* Quick-Capture Input Bar (Radius controlled by --radius-pill) */}
         <div
-          className={`flex items-center h-9 pl-1.5 pr-1.5 bg-panel border capture-pill transition-colors duration-150 ${
+          className={`flex items-center h-9 pl-1.5 pr-1.5 bg-panel border capture-pill rounded-full transition-colors duration-150 ${
             isListening
               ? 'border-accent bg-panel'
               : 'border-border focus-within:border-accent'
           }`}
         >
-          <div className="w-6 h-6 capture-pill bg-accent text-on-accent flex items-center justify-center mr-2 flex-shrink-0">
+          <div className="w-6 h-6 capture-pill rounded-full bg-accent text-on-accent flex items-center justify-center mr-2 flex-shrink-0">
             <Sparkles className="w-3 h-3" />
           </div>
 
@@ -254,7 +254,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               type="button"
               onClick={() => setShowOptions((prev) => !prev)}
               title="Ziel wählen (Quick Dump, direkt als Aufgabe, auf Liste oder als Notiz) & Optionen"
-              className={`h-6 px-2.5 capture-pill text-[11px] flex items-center gap-1 transition-colors ${
+              className={`h-6 px-2.5 capture-pill rounded-full text-[11px] flex items-center gap-1 transition-colors ${
                 showOptions || target !== 'inbox' || priority !== 'normal' || dueDate
                   ? 'bg-accent-dim text-accent border border-accent-border font-medium'
                   : 'text-muted hover:text-main hover:bg-panel-elevated border border-transparent'
@@ -281,7 +281,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               type="button"
               onClick={toggleVoiceDictation}
               title="Spracheingabe"
-              className={`w-6 h-6 capture-pill flex items-center justify-center transition-colors ${
+              className={`w-6 h-6 capture-pill rounded-full flex items-center justify-center transition-colors ${
                 isListening
                   ? 'bg-accent-dim text-accent'
                   : 'text-muted hover:text-main hover:bg-panel-elevated'
@@ -294,7 +294,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
             <button
               type="submit"
               disabled={!content.trim() || isSubmitting}
-              className={`h-6 px-2.5 capture-pill font-medium text-[11px] flex items-center gap-1 transition-all ${
+              className={`h-6 px-2.5 capture-pill rounded-full font-medium text-[11px] flex items-center gap-1 transition-all ${
                 content.trim()
                   ? 'bg-accent hover:bg-accent-hover text-on-accent cursor-pointer shadow-sm'
                   : 'bg-panel-elevated text-faint cursor-not-allowed'
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 54c6dc4..e8ee468 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -78,9 +78,10 @@ body {
     border-radius: var(--radius-card);
   }
 
-  /* Quick-Capture-Blase & Profil-Pill im Header */
-  .capture-pill {
-    border-radius: var(--radius-pill);
+  /* Quick-Capture-Blase im Header (immer vollständig abgerundet) */
+  .capture-pill,
+  .capture-pill.bg-panel.border {
+    border-radius: 9999px !important;
   }
 
   /* Aufgaben-Checkboxen */