From 881e10395957c1963878bd65bfe3ef2983ee1fb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Mon, 26 Jan 2026 11:48:21 +0100
Subject: [PATCH] style(terraform resourcesl): improve responsive & large
 resources table

---
 .../src/lib/resource-details/resource-details.tsx     | 11 ++++++-----
 .../terraform-resources-section.tsx                   | 10 +++++-----
 .../src/lib/ui/page-general/page-general.tsx          |  4 ++--
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/libs/domains/service-terraform/feature/src/lib/resource-details/resource-details.tsx b/libs/domains/service-terraform/feature/src/lib/resource-details/resource-details.tsx
index ad9b90f17cb..38a2d7a28e0 100644
--- a/libs/domains/service-terraform/feature/src/lib/resource-details/resource-details.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/resource-details/resource-details.tsx
@@ -45,7 +45,7 @@ export function ResourceDetails({ resource }: ResourceDetailsProps): ReactElemen
   return (
     <div className="flex flex-col overflow-y-auto">
       <div className="overflow-hidden">
-        <Table.Root className="w-full text-ssm">
+        <Table.Root className="text-ssm">
           <Table.Header>
             <Table.Row>
               <Table.ColumnHeaderCell className="w-2/4 border-r border-neutral-200 font-medium">
@@ -58,13 +58,14 @@ export function ResourceDetails({ resource }: ResourceDetailsProps): ReactElemen
             {tableData.map((row, index) => (
               <Table.Row
                 key={index}
-                className="h-12"
                 onMouseEnter={() => setHoveredIndex(index)}
                 onMouseLeave={() => setHoveredIndex(null)}
               >
-                <Table.Cell className="w-1/2 border-r border-neutral-200 text-neutral-350">{row.key}</Table.Cell>
-                <Table.Cell className={twMerge('w-1/2 text-neutral-400', hoveredIndex === index && 'group')}>
-                  <span className="truncate break-all text-ssm">{row.value}</span>
+                <Table.Cell className="h-10 w-1/2 border-r border-neutral-200 py-3 text-neutral-350">
+                  {row.key}
+                </Table.Cell>
+                <Table.Cell className={twMerge('h-10 w-1/2 py-3 text-neutral-400', hoveredIndex === index && 'group')}>
+                  <span className="whitespace-normal break-all text-ssm">{row.value}</span>
                   {hoveredIndex === index && (
                     <CopyToClipboardButtonIcon
                       content={row.value}
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-resources-section/terraform-resources-section.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-resources-section/terraform-resources-section.tsx
index 8f90eaeb9a0..9b41b7be219 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-resources-section/terraform-resources-section.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-resources-section/terraform-resources-section.tsx
@@ -75,11 +75,11 @@ export function TerraformResourcesSection({ terraformId }: TerraformResourcesSec
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex h-[calc(100dvh-theme(spacing.navbar-height)-4rem)] flex-col gap-4">
       {/* Split panel: Tree list (with search) and Details */}
-      <div className="flex min-h-0 overflow-hidden">
+      <div className="flex h-full">
         {/* Left panel: Search + Resource tree list */}
-        <div className="flex w-1/4 flex-shrink-0 flex-col border-r border-neutral-200">
+        <div className="flex w-1/4 flex-shrink-0 flex-col overflow-y-scroll border-r border-neutral-200">
           {/* Search bar */}
           <div className="flex-shrink-0 p-4 pb-0">
             <div className="relative">
@@ -107,7 +107,7 @@ export function TerraformResourcesSection({ terraformId }: TerraformResourcesSec
           </div>
 
           {/* Tree list */}
-          <div className="flex-1 overflow-hidden p-4">
+          <div className="flex-1 p-4">
             <ResourceTreeList
               resources={data}
               selectedResourceId={selectedResourceId}
@@ -118,7 +118,7 @@ export function TerraformResourcesSection({ terraformId }: TerraformResourcesSec
         </div>
 
         {/* Right panel: Resource details */}
-        <div className="w-3/4 flex-1 overflow-hidden">
+        <div className="w-3/4 flex-1 overflow-y-scroll">
           <ResourceDetails resource={selectedResource} />
         </div>
       </div>
diff --git a/libs/pages/application/src/lib/ui/page-general/page-general.tsx b/libs/pages/application/src/lib/ui/page-general/page-general.tsx
index b076e795e16..6a4a2c11aa2 100644
--- a/libs/pages/application/src/lib/ui/page-general/page-general.tsx
+++ b/libs/pages/application/src/lib/ui/page-general/page-general.tsx
@@ -207,14 +207,14 @@ export function PageGeneral({ serviceId, environmentId, service, hasNoMetrics }:
           <Tabs.Root
             value={activeTab}
             onValueChange={setActiveTab}
-            className="w-full rounded-lg border border-neutral-200"
+            className="border-neutral-200x w-full rounded-lg border"
           >
             <Tabs.List className="rounded-t-lg border-b border-neutral-200 bg-neutral-100">
               <Tabs.Trigger value="variables">Output Variables</Tabs.Trigger>
               <Tabs.Trigger value="resources">Infrastructure Resources</Tabs.Trigger>
             </Tabs.List>
             <Tabs.Content value="variables">
-              <OutputVariables serviceId={serviceId} serviceType={service?.serviceType} />
+              <OutputVariables serviceId={serviceId} serviceType={service?.serviceType} className="table-fixed" />
             </Tabs.Content>
             <Tabs.Content value="resources">
               <TerraformResourcesSection terraformId={serviceId} />