From 97a5603c174d9fd7e733a44c597ef46ad155a9fc Mon Sep 17 00:00:00 2001 From: RemiBonnet Date: Tue, 5 May 2026 11:50:24 +0200 Subject: [PATCH] feat(layout): update height calculations for page containers --- .../cluster/$clusterId/cloud-shell.tsx | 2 +- .../cluster/$clusterId/cluster-logs.tsx | 2 +- .../service/$serviceId/cloud-shell.tsx | 2 +- .../deployments/logs/$executionId.tsx | 2 +- .../_authenticated/organization/route.tsx | 27 ++- .../deployment-logs-content.tsx | 6 +- .../lib/deployment-logs/deployment-logs.tsx | 4 +- .../list-deployment-logs.tsx | 46 ++--- .../list-service-logs/list-service-logs.tsx | 174 +++++++++--------- .../terraform-resources-section.tsx | 2 +- tailwind-workspace-preset.js | 11 +- 11 files changed, 147 insertions(+), 131 deletions(-) diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell.tsx index a61d1037342..f92e3446701 100644 --- a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell.tsx +++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell.tsx @@ -21,7 +21,7 @@ function RouteComponent() { } return ( -
+
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs.tsx index 610995abc27..ef4eb3cb823 100644 --- a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs.tsx +++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs.tsx @@ -37,7 +37,7 @@ function RouteComponent() { } return ( -
+
{isLogsLoading && !isLogsFetched ? (
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/cloud-shell.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/cloud-shell.tsx index 6d979ca209b..67d3b3e5554 100644 --- a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/cloud-shell.tsx +++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/cloud-shell.tsx @@ -44,7 +44,7 @@ function RouteComponent() { } return ( -
+
+
} diff --git a/apps/console/src/routes/_authenticated/organization/route.tsx b/apps/console/src/routes/_authenticated/organization/route.tsx index 11da54528c9..ceceba52dad 100644 --- a/apps/console/src/routes/_authenticated/organization/route.tsx +++ b/apps/console/src/routes/_authenticated/organization/route.tsx @@ -507,6 +507,7 @@ function OrganizationRoute() { enabled: Boolean(environmentId) && Boolean(serviceId), }) const scrollContainerRef = useRef(null) + const bannersRef = useRef(null) const assistantAnchorRef = useRef(null) const [devopsCopilotOpen, setDevopsCopilotOpen] = useState(false) const sendMessageRef = useRef<((message: string, createNewChat?: boolean) => void) | null>(null) @@ -557,6 +558,28 @@ function OrganizationRoute() { scrollContainerRef.current?.scrollTo({ top: 0 }) }, [location.pathname]) + useLayoutEffect(() => { + const scrollContainer = scrollContainerRef.current + const banners = bannersRef.current + + if (!scrollContainer || !banners) { + return + } + + const update = () => { + scrollContainer.style.setProperty('--organization-banners-height', `${banners.offsetHeight}px`) + } + + const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update) + resizeObserver?.observe(banners) + update() + + return () => { + resizeObserver?.disconnect() + scrollContainer.style.removeProperty('--organization-banners-height') + } + }, []) + /** * Sync the assistant panel's available height with the sticky wrapper's actual top in the viewport. * @@ -637,7 +660,9 @@ function OrganizationRoute() { {/* TODO: Conflicts with body main:not(.h-screen, .layout-onboarding) */}
- +
+ +
}> diff --git a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-content/deployment-logs-content.tsx b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-content/deployment-logs-content.tsx index 461dee9c6d8..9ce2db54115 100644 --- a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-content/deployment-logs-content.tsx +++ b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-content/deployment-logs-content.tsx @@ -163,10 +163,11 @@ export function DeploymentLogsContent({ .otherwise(() => false) return ( - <> +
{showBannerNew && ( @@ -192,9 +193,8 @@ export function DeploymentLogsContent({ environmentStatus={environmentStatus} stage={stageFromServiceId} preCheckStage={preCheckStage} - hasNewDeploymentBanner={showBannerNew} /> - +
) } diff --git a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs.tsx b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs.tsx index 810d7bbc07b..d6f9a51ca36 100644 --- a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs.tsx +++ b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs.tsx @@ -26,7 +26,7 @@ const WebSocketListenerMemo = memo(MetricsWebSocketListener) function Loader() { return ( -
+
@@ -34,7 +34,7 @@ function Loader() {
-
+
diff --git a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx index 84c279324a0..d4859764dff 100644 --- a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx +++ b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx @@ -142,7 +142,6 @@ export interface ListDeploymentLogsProps { stage?: Stage environmentStatus?: EnvironmentStatus preCheckStage?: EnvironmentStatusesWithStagesPreCheckStage - hasNewDeploymentBanner?: boolean } interface DeploymentLogsHeaderProps { @@ -236,7 +235,6 @@ interface DeploymentLogsBodyProps { environmentStatus?: EnvironmentStatus preCheckStage?: EnvironmentStatusesWithStagesPreCheckStage deploymentHistory: DeploymentHistoryEnvironmentV2[] - hasNewDeploymentBanner: boolean } const PAUSE_SCROLL_THRESHOLD = 80 @@ -248,7 +246,6 @@ function DeploymentLogsBody({ stage, preCheckStage, deploymentHistory, - hasNewDeploymentBanner, }: DeploymentLogsBodyProps) { const { hash } = useLocation() const { organizationId = '', projectId = '', serviceId = '', executionId = '' } = useParams({ strict: false }) @@ -394,9 +391,6 @@ function DeploymentLogsBody({ () => (type: FilterType) => columnFilters.some((filter) => filter.value === type), [columnFilters] ) - const emptyStateHeightClass = hasNewDeploymentBanner ? 'h-[calc(100vh-201px)]' : 'h-[calc(100vh-161px)]' - const logsViewportHeightClass = hasNewDeploymentBanner ? 'h-[calc(100vh-249px)]' : 'h-[calc(100vh-209px)]' - const isLastVersion = deploymentHistory?.[0]?.identifier.execution_id === executionId || !executionId const currentDeployment = executionId ? deploymentHistory.find((d) => d.identifier.execution_id === executionId) @@ -435,7 +429,7 @@ function DeploymentLogsBody({ if (!logs || logs.length === 0 || !serviceStatus.is_part_last_deployment) { return ( -
+
{ @@ -584,7 +578,6 @@ export function ListDeploymentLogs({ serviceStatus, stage, preCheckStage, - hasNewDeploymentBanner = false, }: ListDeploymentLogsProps) { const { executionId = '', serviceId = '' } = useParams({ strict: false }) const { data: deploymentHistory = [] } = useServiceDeploymentHistory({ @@ -594,25 +587,22 @@ export function ListDeploymentLogs({ }) return ( -
-
- - -
+
+ +
) } diff --git a/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx index ada764532f6..a62c2c42dc4 100644 --- a/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx +++ b/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx @@ -234,104 +234,100 @@ function ListServiceLogsContent({ cluster, environment }: { cluster: Cluster; en (!isLogsFetched && !isLogsLoading) ) { return ( -
-
- -
- -
+
+ +
+
) } return ( -
-
- - {isLogsLoading && isLiveMode ? ( -
- -
- ) : ( -
{ - if (!liveLogs || pauseLogs) return - - const section = refScrollSection.current - if (!section) return - - const hasScrollableContent = section.clientHeight !== section.scrollHeight - if (!hasScrollableContent) return - - if (event.deltaY < 0) { - accumulatedScrollUp.current += Math.abs(event.deltaY) - if (accumulatedScrollUp.current >= PAUSE_SCROLL_THRESHOLD) { - accumulatedScrollUp.current = 0 - setPauseLogs(true) - } - } else { +
+ + {isLogsLoading && isLiveMode ? ( +
+ +
+ ) : ( +
{ + if (!liveLogs || pauseLogs) return + + const section = refScrollSection.current + if (!section) return + + const hasScrollableContent = section.clientHeight !== section.scrollHeight + if (!hasScrollableContent) return + + if (event.deltaY < 0) { + accumulatedScrollUp.current += Math.abs(event.deltaY) + if (accumulatedScrollUp.current >= PAUSE_SCROLL_THRESHOLD) { accumulatedScrollUp.current = 0 + setPauseLogs(true) } - }} + } else { + accumulatedScrollUp.current = 0 + } + }} + > + {!isLiveMode && hasMoreLogs && historyLogs.length > 0 && ( + + )} + - {!isLiveMode && hasMoreLogs && historyLogs.length > 0 && ( - - )} - - - {logs.map((log, index) => { - const timestamp = log.timestamp - return ( - - ) - })} - - - {isLiveMode ? ( - isServiceProgressing && - isLogsFetched && - ) : ( -
- )} -
- )} - {isLiveMode && ( - - )} -
+ + {logs.map((log, index) => { + const timestamp = log.timestamp + return ( + + ) + })} + + + {isLiveMode ? ( + isServiceProgressing && + isLogsFetched && + ) : ( +
+ )} +
+ )} + {isLiveMode && ( + + )}
) } 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 20adc838c00..1d52b51bc1f 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 @@ -72,7 +72,7 @@ export function TerraformResourcesSection({ terraformId }: TerraformResourcesSec } return ( -
+
{/* Split panel: Tree list (with search) and Details */}
{/* Left panel: Search + Resource tree list */} diff --git a/tailwind-workspace-preset.js b/tailwind-workspace-preset.js index e7fa66389e6..85d91497569 100644 --- a/tailwind-workspace-preset.js +++ b/tailwind-workspace-preset.js @@ -85,12 +85,17 @@ module.exports = { maxWidth: { 'content-with-navigation-left': '44.5rem', }, + height: { + 'page-container': + 'calc(100dvh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - var(--organization-banners-height, 0px))', + }, minHeight: { - 'page-container': 'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height))', + 'page-container': + 'calc(100dvh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - var(--organization-banners-height, 0px))', 'page-container-wbanner': - 'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 40px)', + 'calc(100dvh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 40px)', 'page-container-wprogressbar': - 'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 6px)', + 'calc(100dvh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 6px)', }, fontFamily: { sans: ['Roboto', 'Helvetica', 'sans-serif'],