From 83b76b95a0c2cb89cf5d1426bf30a713b8290ef6 Mon Sep 17 00:00:00 2001
From: marc <marc@shortcake.local>
Date: Wed, 12 Aug 2026 11:41:17 +0200
Subject: [PATCH] Make a separator legible on a phone

It was a one-pixel hairline in the border colour with faint grey text on
near-black: present, and on a small screen in daylight effectively
invisible. Marc reported it as missing, which it may as well have been.

Two-pixel rules in a colour that carries, a brighter and slightly larger
label, and room above it so it reads as the end of what came before
rather than as decoration on the note below.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/src/features/notes/NoteList.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/notes/NoteList.jsx b/frontend/src/features/notes/NoteList.jsx
index 5f698e2..ae38e1a 100644
--- a/frontend/src/features/notes/NoteList.jsx
+++ b/frontend/src/features/notes/NoteList.jsx
@@ -101,7 +101,9 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
         display: "flex",
         alignItems: "center",
         gap: 8,
-        padding: "8px 8px 6px",
+        /* Room above it, so it reads as the end of what came before rather than
+           as decoration attached to the next note. */
+        padding: "14px 8px 8px",
         cursor: "grab",
       }}
     >
@@ -110,7 +112,7 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
           keeps one width whether it is showing a label or an input. Sizing it to
           its contents made the whole row jump sideways the moment renaming
           started, which is exactly when the eye is on it. */}
-      <div style={{ height: 1, background: T.border, flex: 1, minWidth: 8 }} />
+      <div style={{ height: 2, borderRadius: 2, background: T.faint, flex: 1, minWidth: 8 }} />
       <div style={{ flex: "0 0 auto", width: MIDDLE_W, display: "flex" }}>
         {editing ? (
           <input
@@ -133,10 +135,10 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
               border: `1px solid ${T.border}`,
               borderRadius: 6,
               background: "transparent",
-              color: T.textSec,
-              fontSize: 10.5,
+              color: T.text,
+              fontSize: 11.5,
               fontWeight: 700,
-              letterSpacing: 0.6,
+              letterSpacing: 0.8,
               textAlign: "center",
               // Matches the button's box exactly, so nothing shifts vertically
               // either when the input replaces it.
@@ -151,10 +153,10 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
               width: "100%",
               border: "1px solid transparent",
               background: "transparent",
-              color: separator.label ? T.textSec : T.faint,
-              fontSize: 10.5,
+              color: separator.label ? T.text : T.muted,
+              fontSize: 11.5,
               fontWeight: 700,
-              letterSpacing: 0.6,
+              letterSpacing: 0.8,
               textTransform: "uppercase",
               textAlign: "center",
               padding: "1px 4px",
@@ -167,7 +169,7 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
           </div>
         )}
       </div>
-      <div style={{ height: 1, background: T.border, flex: 1, minWidth: 8 }} />
+      <div style={{ height: 2, borderRadius: 2, background: T.faint, flex: 1, minWidth: 8 }} />
     </div>
   );
 }