From 4fab947d6c2b1191fbbac37124aa5bd3af0af79e Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 20:23:33 -0400
Subject: [PATCH] fix: Clean up SettingsModal layout

- Both danger zone rows now use flex items-start gap-4 for consistent
  text+button alignment with proper breathing room
- Added shrink-0 to buttons so they don't compress
- Added whitespace-nowrap to Delete All button so text doesn't wrap
- Shortened confirm button text to just 'Confirm' (was 'Confirm Delete')
- Moved confirmation warning inline under the description text instead
  of as a separate block below, keeping the row compact
- Shortened description text: 'Remove N clips. Cannot be undone.'
---
 frontend/src/components/SettingsModal.tsx | 53 +++++++++++------------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index dfcde65..6b8d9c5 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -76,15 +76,15 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
 
             <div className="p-4 space-y-4">
               {/* Clear Waveforms */}
-              <div className="flex items-center justify-between">
-                <div>
+              <div className="flex items-start gap-4">
+                <div className="flex-1 min-w-0">
                   <p className="text-sm text-white font-medium">Clear Waveform Cache</p>
                   <p className="text-xs text-lyria-muted mt-0.5">Delete all cached SVGs. They regenerate on next view.</p>
                 </div>
                 <button
                   onClick={handleClearWaveforms}
                   disabled={loading}
-                  className="px-3 py-1.5 text-sm rounded bg-white/5 text-white hover:bg-white/10 disabled:opacity-50 transition-colors border border-white/10"
+                  className="shrink-0 px-3 py-1.5 text-sm rounded bg-white/5 text-white hover:bg-white/10 disabled:opacity-50 transition-colors border border-white/10"
                 >
                   Clear
                 </button>
@@ -93,32 +93,29 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
               <hr className="border-white/5" />
 
               {/* Delete All */}
-              <div>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm text-white font-medium">Delete All Tracks</p>
-                    <p className="text-xs text-lyria-muted mt-0.5">
-                      Remove {clipCount} clip{clipCount !== 1 ? 's' : ''}, MP3s, artwork, and waveforms. Cannot be undone.
-                    </p>
-                  </div>
-                  <button
-                    onClick={handleDeleteAll}
-                    disabled={loading || clipCount === 0}
-                    className={`px-3 py-1.5 text-sm rounded transition-colors border ${
-                      confirmDelete
-                        ? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
-                        : 'bg-white/5 text-red-400 hover:bg-red-500/10 border-red-500/30'
-                    } disabled:opacity-30`}
-                  >
-                    {confirmDelete ? 'Confirm Delete' : 'Delete All'}
-                  </button>
-                </div>
-
-                {confirmDelete && (
-                  <p className="text-xs text-red-400 mt-2">
-                    Click again to confirm. This permanently deletes everything.
+              <div className="flex items-start gap-4">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm text-white font-medium">Delete All Tracks</p>
+                  <p className="text-xs text-lyria-muted mt-0.5">
+                    Remove {clipCount} clip{clipCount !== 1 ? 's' : ''}. Cannot be undone.
                   </p>
-                )}
+                  {confirmDelete && (
+                    <p className="text-xs text-red-400 mt-1.5">
+                      Click again to confirm permanent deletion.
+                    </p>
+                  )}
+                </div>
+                <button
+                  onClick={handleDeleteAll}
+                  disabled={loading || clipCount === 0}
+                  className={`shrink-0 px-3 py-1.5 text-sm rounded transition-colors border whitespace-nowrap ${
+                    confirmDelete
+                      ? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
+                      : 'bg-white/5 text-red-400 hover:bg-red-500/10 border-red-500/30'
+                  } disabled:opacity-30`}
+                >
+                  {confirmDelete ? 'Confirm' : 'Delete All'}
+                </button>
               </div>
             </div>
           </div>