diff --git a/src/hooks/live-streams.ts b/src/hooks/live-streams.ts index d4a6277..5a1322a 100644 --- a/src/hooks/live-streams.ts +++ b/src/hooks/live-streams.ts @@ -42,17 +42,19 @@ export function useStreamsFeed(tag?: string) { return []; }, [feed.data]); - const live = feedSorted.filter( - (a) => findTag(a, "status") === StreamState.Live - ).sort(sortStarts); - const planned = feedSorted.filter( - (a) => findTag(a, "status") === StreamState.Planned - ).sort(sortStarts); - const ended = feedSorted.filter((a) => { - const hasEnded = findTag(a, "status") === StreamState.Ended; - const recording = findTag(a, "recording") ?? ""; - return hasEnded && recording?.length > 0; - }).sort(sortCreatedAt); + const live = feedSorted + .filter((a) => findTag(a, "status") === StreamState.Live) + .sort(sortStarts); + const planned = feedSorted + .filter((a) => findTag(a, "status") === StreamState.Planned) + .sort(sortStarts); + const ended = feedSorted + .filter((a) => { + const hasEnded = findTag(a, "status") === StreamState.Ended; + const recording = findTag(a, "recording") ?? ""; + return hasEnded && recording?.length > 0; + }) + .sort(sortCreatedAt); return { live, planned, ended }; } diff --git a/src/pages/root.css b/src/pages/root.css index f333cba..6b0725b 100644 --- a/src/pages/root.css +++ b/src/pages/root.css @@ -38,6 +38,12 @@ display: flex; } +@media (max-width: 1020px) { + .divider { + padding: 0 8px; + } +} + .divider:after { content: ""; flex: 1; diff --git a/src/pages/root.tsx b/src/pages/root.tsx index 090dfc2..6284764 100644 --- a/src/pages/root.tsx +++ b/src/pages/root.tsx @@ -32,11 +32,14 @@ export function RootPage() { return (
{hasFollowingLive && ( -
- {following.map((e) => ( - - ))} -
+ <> +

Following

+
+ {following.map((e) => ( + + ))} +
+ )} {!hasFollowingLive && (