fix

src/components/PodcastCard.tsx

@@ -2,7 +2,7 @@
  * PodcastCard component - Reusable card for displaying podcast info
  */
 
-import { Show } from "solid-js"
+import { Show, For } from "solid-js"
 import type { Podcast } from "../types/podcast"
 
 type PodcastCardProps = {
@@ -54,9 +54,9 @@ export function PodcastCard(props: PodcastCardProps) {
       <box flexDirection="row" justifyContent="space-between" marginTop={props.compact ? 0 : 1}>
         <box flexDirection="row" gap={1}>
           <Show when={(props.podcast.categories ?? []).length > 0}>
-            {(props.podcast.categories ?? []).slice(0, 2).map((cat) => (
-              <text fg="yellow">[{cat}]</text>
-            ))}
+            <For each={(props.podcast.categories ?? []).slice(0, 2)}>
+              {(cat) => <text fg="yellow">[{cat}]</text>}
+            </For>
           </Show>
         </box>
 

src/components/SettingsScreen.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js"
+import { createSignal, For } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { SourceManager } from "./SourceManager"
 import { useTheme } from "../context/ThemeContext"
@@ -56,18 +56,20 @@ export function SettingsScreen(props: SettingsScreenProps) {
       </box>
 
       <box flexDirection="row" gap={1}>
-        {SECTIONS.map((section, index) => (
-          <box
-            border
-            padding={0}
-            backgroundColor={activeSection() === section.id ? theme.primary : undefined}
-            onMouseDown={() => setActiveSection(section.id)}
-          >
-            <text fg={activeSection() === section.id ? theme.text : theme.textMuted}>
-              [{index + 1}] {section.label}
-            </text>
-          </box>
-        ))}
+        <For each={SECTIONS}>
+          {(section, index) => (
+            <box
+              border
+              padding={0}
+              backgroundColor={activeSection() === section.id ? theme.primary : undefined}
+              onMouseDown={() => setActiveSection(section.id)}
+            >
+              <text fg={activeSection() === section.id ? theme.text : theme.textMuted}>
+                [{index() + 1}] {section.label}
+              </text>
+            </box>
+          )}
+        </For>
       </box>
 
       <box border flexGrow={1} padding={1} flexDirection="column" gap={1}>

src/components/TrendingShows.tsx

@@ -31,7 +31,7 @@ export function TrendingShows(props: TrendingShowsProps) {
       </Show>
 
       <Show when={!props.isLoading && props.podcasts.length > 0}>
-        <scrollbox height="100%">
+        <scrollbox height={15}>
           <box flexDirection="column">
             <For each={props.podcasts}>
               {(podcast, index) => (