From 6fcf3179be9520c5e176cbe29e7cfcab5c0b5133 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Thu, 14 May 2026 19:30:45 +0200
Subject: [PATCH] fix: 2-line layout for sleep timer custom row (label above,
 input+OK below)

Picker is only ~90px wide; single-line label+input+OK was too cramped.
Now stacks vertically so input gets full row width minus the OK button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 6 ++++--
 styles.css | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 0153c2e..d81c043 100644
--- a/index.html
+++ b/index.html
@@ -721,8 +721,10 @@
         <button onclick="absSleepIn(60)">60 Min</button>
         <div class="abs-sleep-custom-row">
           <span class="abs-sleep-custom-label">Eigene Zeit</span>
-          <input id="abs-sleep-custom-input" type="number" min="1" max="999" placeholder="Min" onkeydown="if(event.key==='Enter'){var v=parseInt(this.value);if(v>0)absSleepIn(v);}">
-          <button class="abs-sleep-custom-ok" onclick="var v=parseInt(document.getElementById('abs-sleep-custom-input').value);if(v>0)absSleepIn(v);">OK</button>
+          <div class="abs-sleep-custom-controls">
+            <input id="abs-sleep-custom-input" type="number" min="1" max="999" placeholder="Min" onkeydown="if(event.key==='Enter'){var v=parseInt(this.value);if(v>0)absSleepIn(v);}">
+            <button class="abs-sleep-custom-ok" onclick="var v=parseInt(document.getElementById('abs-sleep-custom-input').value);if(v>0)absSleepIn(v);">OK</button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/styles.css b/styles.css
index c49a302..cab7a9c 100644
--- a/styles.css
+++ b/styles.css
@@ -950,13 +950,14 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .abs-picker button{display:block;width:100%;padding:9px 16px;background:none;border:none;color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;text-align:left;transition:background .15s;white-space:nowrap}
 .abs-picker button:hover{background:var(--surface2)}
 .abs-picker button.active{color:var(--accent);font-weight:700}
-.abs-sleep-custom-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 16px 9px;border-top:1px solid var(--border2);box-sizing:border-box}
-.abs-sleep-custom-label{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0}
+.abs-sleep-custom-row{display:flex;flex-direction:column;width:100%;padding:6px 12px 8px;border-top:1px solid var(--border2);box-sizing:border-box;gap:4px}
+.abs-sleep-custom-label{font-size:10px;color:var(--text3)}
+.abs-sleep-custom-controls{display:flex;gap:6px;align-items:center}
 .abs-sleep-custom-row input{flex:1;min-width:0;padding:5px 8px;background:var(--surface);border:1.5px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s}
 .abs-sleep-custom-row input:focus{border-color:var(--accent)}
 .abs-sleep-custom-row input[type=number]::-webkit-inner-spin-button,.abs-sleep-custom-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
 .abs-sleep-custom-row input[type=number]{-moz-appearance:textfield}
-.abs-sleep-custom-ok{flex-shrink:0;padding:3px 7px;background:var(--accent);border:none;border-radius:5px;color:#fff;font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer}
+.abs-sleep-custom-ok{flex-shrink:0;padding:4px 8px;background:var(--accent);border:none;border-radius:5px;color:#fff;font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer}
 .abs-chapter-list{flex-shrink:0;overflow-y:auto;max-height:0;transition:max-height .3s ease;border-top:1px solid transparent}
 .abs-chapter-list.open{max-height:220px;border-color:var(--border)}
 .abs-ch-item{display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer;transition:background .15s}