transcript gutter

www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx

@@ -6,6 +6,7 @@ import { formatTime } from "../../../../lib/time";
 import { getTopicColor } from "../../../../lib/topicColors";
 import { TranscriptStatus } from "../../../../lib/transcript";
 import { featureEnabled } from "../../../../lib/features";
+import { TOPICS_SCROLL_DIV_ID } from "./constants";
 
 type TopicListProps = {
   topics: Topic[];
@@ -50,13 +51,13 @@ export function TopicList({
   };
 
   const scrollToBottom = () => {
-    const topicsDiv = document.getElementById("topics-scroll-div");
+    const topicsDiv = document.getElementById(TOPICS_SCROLL_DIV_ID);
     if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight;
   };
 
   useEffect(() => {
     if (autoscroll) {
-      const topicsDiv = document.getElementById("topics-scroll-div");
+      const topicsDiv = document.getElementById(TOPICS_SCROLL_DIV_ID);
       topicsDiv && toggleScroll(topicsDiv);
     }
   }, [activeTopic, autoscroll]);
@@ -110,7 +111,7 @@ export function TopicList({
       )}
 
       <Box
-        id="topics-scroll-div"
+        id={TOPICS_SCROLL_DIV_ID}
         overflowY="auto"
         h="full"
         onScroll={handleScroll}

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

@@ -200,7 +200,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
     <>
       <Grid
         templateColumns="1fr"
-        templateRows="auto minmax(0, 1fr)"
+        templateRows="auto auto"
         gap={4}
         mt={4}
         mb={4}
@@ -229,17 +229,22 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             )}
           </>
         )}
-        <Flex
-          direction="column"
+        <Grid
+          templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
+          templateRows={{
+            base: "auto auto auto",
+            md: "auto auto",
+          }}
           gap={4}
+          gridRowGap={2}
           padding={4}
-          paddingBottom={0}
           background="gray.bg"
-          border="2px solid"
-          borderColor="gray.bg"
+          border={"2px solid"}
+          borderColor={"gray.bg"}
           borderRadius={8}
         >
           {/* Title */}
+          <GridItem colSpan={{ base: 1, md: 2 }}>
             <Flex direction="column" gap={0}>
               <Flex alignItems="center" gap={2}>
                 <TranscriptTitle
@@ -260,8 +265,10 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 </Text>
               )}
             </Flex>
+          </GridItem>
 
-          {/* Topics List (top section - fixed height, scrollable) */}
+          {/* Left column: Topics List */}
+          <GridItem display="flex" flexDirection="column" gap={4} h="100%">
             <TopicList
               topics={topics.topics || []}
               useActiveTopic={useActiveTopic}
@@ -272,11 +279,12 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               onTopicClick={handleTopicClick}
             />
 
-          {/* Transcript with colored gutter (bottom section - scrollable container) */}
+            {/* Transcript with colored gutter (scrollable) */}
             {topics.topics && topics.topics.length > 0 && (
               <Box
                 overflowY="auto"
-              maxH="600px"
+                flex={1}
+                minH="0"
                 pr={2}
                 css={{
                   "&::-webkit-scrollbar": {
@@ -301,8 +309,9 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 />
               </Box>
             )}
+          </GridItem>
 
-          {/* Final Summary (at bottom) */}
+          {/* Right column: Final Summary */}
           {transcript.data && topics.topics ? (
             <FinalSummary
               transcript={transcript.data}
@@ -313,7 +322,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               finalSummaryRef={setFinalSummaryElement}
             />
           ) : (
-            <Flex justify="center" alignItems="center" h="200px">
+            <Flex justify="center" alignItems="center" h="100%">
               <Flex direction="column" h="full" justify="center" align="center">
                 {transcript?.data?.status == "processing" ? (
                   <Text>Loading Transcript</Text>
@@ -326,7 +335,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               </Flex>
             </Flex>
           )}
-        </Flex>
+        </Grid>
       </Grid>
     </>
   );