From 3b1d8bd2e574560ceb5762fe6c898a45e97991e6 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 11 Apr 2026 17:16:54 +0200
Subject: [PATCH] fix: make chat discussion fill full viewport height in tablo
 detail view

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/components/TabloDiscussionSection.tsx | 2 +-
 apps/main/src/pages/tablo-details.tsx               | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/main/src/components/TabloDiscussionSection.tsx b/apps/main/src/components/TabloDiscussionSection.tsx
index a3b2881..70a1d1b 100644
--- a/apps/main/src/components/TabloDiscussionSection.tsx
+++ b/apps/main/src/components/TabloDiscussionSection.tsx
@@ -43,7 +43,7 @@ export const TabloDiscussionSection = ({ tablo, isAdmin }: TabloDiscussionSectio
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full overflow-hidden">
       <div className="flex justify-between items-start mb-6">
         <div>
           <h1 className="text-3xl font-bold text-foreground">Discussion</h1>
diff --git a/apps/main/src/pages/tablo-details.tsx b/apps/main/src/pages/tablo-details.tsx
index ba99556..eb1121f 100644
--- a/apps/main/src/pages/tablo-details.tsx
+++ b/apps/main/src/pages/tablo-details.tsx
@@ -380,7 +380,7 @@ export const TabloDetailsPage = () => {
   };
 
   return (
-    <div>
+    <div className={cn(activeSection === "discussion" && "flex flex-col h-[calc(100vh-75px)]")}>
       {/* ── Header ──────────────────────────────────────────────────────── */}
       <div className="px-4 pt-4">
         <div className="flex flex-col md:flex-row items-start justify-between mb-6 border-b border-[#F2F4F7] dark:border-gray-700 pb-5 gap-5 md:gap-0">
@@ -500,7 +500,7 @@ export const TabloDetailsPage = () => {
       </div>
 
       {/* ── Tab content ─────────────────────────────────────────────────── */}
-      <div className="px-4 sm:px-6 pt-6 pb-8">
+      <div className={cn("px-4 sm:px-6 pt-6 pb-8", activeSection === "discussion" && "flex flex-col flex-1 min-h-0")}>
         {activeSection === "overview" &&
           (() => {
             const overviewBlocks: Record<OverviewBlockId, React.ReactNode> = {
@@ -786,7 +786,9 @@ export const TabloDetailsPage = () => {
         {activeSection === "tasks" && <TabloTasksSection tablo={tablo} isAdmin={isAdmin} />}
         {activeSection === "files" && <TabloFilesSection tablo={tablo} isAdmin={isAdmin} />}
         {activeSection === "discussion" && (
-          <TabloDiscussionSection tablo={tablo} isAdmin={isAdmin} />
+          <div className="flex-1 min-h-0">
+            <TabloDiscussionSection tablo={tablo} isAdmin={isAdmin} />
+          </div>
         )}
         {activeSection === "events" && <TabloEventsSection tablo={tablo} isAdmin={isAdmin} />}