Docker/InkNote
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make a separator legible on a phone

Browse Source 
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>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-12 11:41:17 +02:00
1 parent 7cb26898aa
commit 83b76b95a0
1 file changed
+11 -9
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/notes/NoteList.jsx
+11 -9
View File
@@ -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>
);
}