transcription UI

www/app/(app)/transcripts/[transcriptId]/page.tsx

@@ -272,13 +272,34 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             onTopicClick={handleTopicClick}
           />
 
-          {/* Transcript with colored gutter (bottom section - normal document flow) */}
+          {/* Transcript with colored gutter (bottom section - scrollable container) */}
           {topics.topics && topics.topics.length > 0 && (
+            <Box
+              overflowY="auto"
+              maxH="600px"
+              pr={2}
+              css={{
+                "&::-webkit-scrollbar": {
+                  width: "8px",
+                },
+                "&::-webkit-scrollbar-track": {
+                  background: "transparent",
+                },
+                "&::-webkit-scrollbar-thumb": {
+                  background: "#CBD5E0",
+                  borderRadius: "4px",
+                },
+                "&::-webkit-scrollbar-thumb:hover": {
+                  background: "#A0AEC0",
+                },
+              }}
+            >
               <TranscriptWithGutter
                 topics={topics.topics}
                 getSpeakerName={getSpeakerName}
                 onGutterClick={handleGutterClick}
               />
+            </Box>
           )}
 
           {/* Final Summary (at bottom) */}

www/app/lib/topicColors.ts

@@ -0,0 +1,18 @@
+// Predefined color palette for topics
+// Colors chosen for good contrast and visual distinction
+export const TOPIC_COLORS = [
+  "#3B82F6", // blue
+  "#10B981", // green
+  "#F59E0B", // amber
+  "#EF4444", // red
+  "#8B5CF6", // violet
+  "#EC4899", // pink
+  "#14B8A6", // teal
+  "#F97316", // orange
+  "#6366F1", // indigo
+  "#84CC16", // lime
+] as const;
+
+export function getTopicColor(topicIndex: number): string {
+  return TOPIC_COLORS[topicIndex % TOPIC_COLORS.length];
+}