Skip to content

style(terraform resourcesl): improve responsive & large resources table #2329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rmnbrd merged 1 commit into from
Jan 26, 2026
Merged

style(terraform resourcesl): improve responsive & large resources table #2329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions libs/domains/service-terraform/feature/src/lib/resource-details/resource-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}
Expand Down
10 changes: 5 additions & 5 deletions ...ice-terraform/feature/src/lib/terraform-resources-section/terraform-resources-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions libs/pages/application/src/lib/ui/page-general/page-general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down