21103b1f25
article-row had no layout structure at all — title link, score badge, and the dismiss button were plain inline siblings in a block <li>, so a long title pushed the button flush against (or past) the row's edge. Group title+score into a header row and make the row itself a flex column so summary/topics/button always stack on their own line below, regardless of title length. Also stopped rendering the summary <p> and topics div at all when there's no content (many RSS entries have no description), instead of emitting empty elements — spacing was uneven because those still reserved a line's worth of height. Left this as an explicit Rust-side branch rather than CSS :empty: an empty <p> still contains a zero-length text node, and whether :empty matches that is inconsistent across engines, whereas the topics div (an empty `for` loop) has zero children and would be a safe :empty candidate — but kept both on the same explicit mechanism for consistency. Swapped the dismiss button from a raw <button> to the dx Button component, matching the rest of the row and the project's preference for the component library over raw elements. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
17 lines
1.1 KiB
CSS
17 lines
1.1 KiB
CSS
body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; height: 100vh; }
|
|
.app-shell { display: flex; height: 100vh; }
|
|
.content-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem 0.5rem; }
|
|
.content-header h2 { margin: 0; }
|
|
.article-scroll-area { flex: 1; min-height: 0; padding: 0 1.5rem 1.5rem; }
|
|
.article-list { list-style: none; padding: 0; margin: 0; }
|
|
.article-row { border-bottom: 1px solid #ddd; padding: 1rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
|
.article-row-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
|
|
.article-row a { font-weight: 600; text-decoration: none; color: #0b5fff; }
|
|
.summary { color: #444; margin: 0; }
|
|
.topics { display: flex; flex-wrap: wrap; gap: 0.3rem; }
|
|
.error { color: #b00020; }
|
|
.subscribe-form { display: flex; gap: 0.5rem; margin: 1rem 0; }
|
|
.subscribe-form .dx-input { flex: 1; }
|
|
.subscribe-status { margin: 0.25rem 0 1rem; font-size: 0.9rem; }
|
|
.subscribe-status.success { color: #1a7f37; }
|
|
.subscribe-status.error { color: #b00020; }
|