fix(rows): keep episode rows exactly 3 lines — truncate, don't wrap
Feed and My Shows rows could grow to 4+ lines when a long title was shrunk by the current pane: flexible text wrapped instead of truncating, shifting every row below while scrolling. Add wrapMode=none + truncate to flexible text and flexShrink=0 to fixed-width cells so rows stay one line tall. Feed rows also move the podcast name onto its own line. Adds a rendered-layout regression test at 70 columns (35-col current pane).
This commit is contained in:
@@ -362,26 +362,41 @@ export function MyShowsPage() {
|
||||
}}
|
||||
>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text fg={focusFg(index(), lf(), isActive())}>
|
||||
<text
|
||||
flexShrink={0}
|
||||
fg={focusFg(index(), lf(), isActive())}
|
||||
>
|
||||
{index() === lf() ? marker() : " "}
|
||||
</text>
|
||||
<text fg={focusFg(index(), lf(), isActive())}>
|
||||
<text
|
||||
wrapMode="none"
|
||||
truncate
|
||||
fg={focusFg(index(), lf(), isActive())}
|
||||
>
|
||||
{ep.episodeNumber ? `#${ep.episodeNumber} ` : ""}
|
||||
{ep.title}
|
||||
</text>
|
||||
</box>
|
||||
<box flexDirection="row" gap={2} paddingLeft={2}>
|
||||
<text fg={index() === lf() ? theme.surface : theme.info}>
|
||||
<text
|
||||
flexShrink={0}
|
||||
fg={index() === lf() ? theme.surface : theme.info}
|
||||
>
|
||||
{formatDate(ep.pubDate)}
|
||||
</text>
|
||||
<text fg={index() === lf() ? theme.surface : muted()}>
|
||||
<text
|
||||
flexShrink={0}
|
||||
fg={index() === lf() ? theme.surface : muted()}
|
||||
>
|
||||
{formatDuration(ep.duration)}
|
||||
</text>
|
||||
<Show when={nav.isSelected(ep.id)}>
|
||||
<text fg={theme.warning}>●</text>
|
||||
<text flexShrink={0} fg={theme.warning}>
|
||||
●
|
||||
</text>
|
||||
</Show>
|
||||
<Show when={downloadLabel(ep.id)}>
|
||||
<text fg={downloadColor(ep.id)}>
|
||||
<text flexShrink={0} fg={downloadColor(ep.id)}>
|
||||
{downloadLabel(ep.id)}
|
||||
</text>
|
||||
</Show>
|
||||
|
||||
Reference in New Issue
Block a user