schaefera/feedsignal
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Let sidebar menu buttons grow with long feed titles
Some checks failed
CI / check (pull_request) Successful in 16m45s
Details
CI / test (pull_request) Successful in 4m46s
Details
CI / audit (pull_request) Failing after 16s
Details

Browse source 
Fixed height + overflow:hidden on .dx-sidebar-menu-button caused long
feed titles (real RSS <title> text, often longer than the custom
labels shown in other readers) to clip and visually collide with the
next row. Switch to min-height per size variant and drop the
overflow/height clipping so rows grow to fit wrapped text; the
existing scrollable sidebar-content container handles the rest.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Austin Schaefer 2026-09-15 09:16:29 +02:00
parent 893e0ed251
commit 03a3c1577d
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
crates/web/src/components/sidebar/style.css
View file

@ -495,7 +495,6 @@
.dx-sidebar-menu-button[data-sidebar="menu-button"] { .dx-sidebar-menu-button[data-sidebar="menu-button"] {
display: flex; display: flex;
overflow: hidden;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
@ -508,9 +507,10 @@
font-size: 0.875rem; font-size: 0.875rem;
gap: 0.5rem; gap: 0.5rem;
outline: none; outline: none;
overflow-wrap: anywhere;
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
transition: width 200ms ease-out, height 200ms ease-out, padding 200ms ease-out; transition: width 200ms ease-out, padding 200ms ease-out;
} }
.dx-sidebar-menu-button[data-sidebar="menu-button"]:hover { .dx-sidebar-menu-button[data-sidebar="menu-button"]:hover {
@ -558,17 +558,17 @@
/* Size variants */ /* Size variants */
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="default"] { .dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="default"] {
height: 2rem; min-height: 2rem;
font-size: 0.875rem; font-size: 0.875rem;
} }
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="sm"] { .dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="sm"] {
height: 1.75rem; min-height: 1.75rem;
font-size: 0.75rem; font-size: 0.75rem;
} }
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"] { .dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"] {
height: 3rem; min-height: 3rem;
font-size: 0.875rem; font-size: 0.875rem;
} }