From 564b011c7a123ae28cb66a1e73ad6a1ecc3a731b Mon Sep 17 00:00:00 2001 From: rays Date: Sat, 12 Sep 2026 02:13:32 +0000 Subject: [PATCH] Give the folder triangle a wider gutter The feed list's left padding grows from 8 to 16 px and the triangle's button from 16 to 24 px wide, so it is no longer cramped against the folder's art. Everything in the list shifts together, so feeds still line up with the places above. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01TAC7sLVqfKmY6rsTLXzNgk --- CHANGELOG.md | 4 ++++ web/index.html | 9 ++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e6ae7f9..5d00183 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,10 @@ The long form, with what was wrong before and how it was found, is in ## [Unreleased] +### Changed + +- The triangle that opens an OPML or Patreon folder has more room, and a wider target to click. + ## [0.5.0] - 2026-09-12 ### Added diff --git a/web/index.html b/web/index.html index b3a4df9..f3ec460 100644 --- a/web/index.html +++ b/web/index.html @@ -134,7 +134,9 @@ input[type=search],input[type=text],input[type=password],input[type=number],sele border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px; } input:focus,select:focus{outline:0;border-color:var(--accent)} -#feedlist{overflow-y:auto;padding:0 8px 12px;flex:1;min-height:0} +/* The wider left gutter is the folder triangle's; everything in the list shifts with it, so the + feeds still line up with the places above. */ +#feedlist{overflow-y:auto;padding:0 8px 12px 16px;flex:1;min-height:0} .feed{ display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:9px; cursor:pointer;margin-bottom:1px;position:relative; @@ -145,9 +147,10 @@ input:focus,select:focus{outline:0;border-color:var(--accent)} .feed.child{margin-left:44px} .feed.child .art{width:28px;height:28px;font-size:11px} /* Only a folder has a triangle, hung in the margin so every feed's art lines up with the places - above it. The button is the row's full height: a near miss used to open the folder's page. */ + above it. The button is the row's full height and 24 px wide: a near miss used to open the + folder's page, and 16 px left the triangle cramped against the art. */ .chev{ - position:absolute;left:-8px;top:0;bottom:0;width:16px;display:grid;place-items:center; + position:absolute;left:-16px;top:0;bottom:0;width:24px;display:grid;place-items:center; border-radius:4px;color:var(--faint); } .chev:hover{color:var(--fg)}