feat(layout): update height calculations for page containers

apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell.tsx

@@ -21,7 +21,7 @@ function RouteComponent() {
   }
 
   return (
-    <div className="flex h-[calc(100dvh-108px)] min-h-0 flex-col overflow-hidden bg-background">
+    <div className="flex h-page-container min-h-0 flex-col overflow-hidden bg-background">
       <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
         <ClusterTerminal organizationId={cluster.organization.id} clusterId={cluster.id} />
       </div>

apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs.tsx

@@ -37,7 +37,7 @@ function RouteComponent() {
   }
 
   return (
-    <div className="flex h-[calc(100dvh-108px)] w-full flex-col overflow-hidden">
+    <div className="flex h-page-container w-full flex-col overflow-hidden">
       {isLogsLoading && !isLogsFetched ? (
         <div className="flex h-full flex-1 flex-col items-center justify-center">
           <div className="flex flex-col items-center justify-center gap-3">

apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/cloud-shell.tsx

@@ -44,7 +44,7 @@ function RouteComponent() {
   }
 
   return (
-    <div className="flex h-[calc(100dvh-108px)] min-h-0 flex-col overflow-hidden bg-background">
+    <div className="flex h-page-container min-h-0 flex-col overflow-hidden bg-background">
       <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
         <ServiceTerminal
           organizationId={environment.organization.id}

apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId.tsx

@@ -13,7 +13,7 @@ function RouteComponent() {
   return (
     <Suspense
       fallback={
-        <div className="flex h-[calc(100vh-202px)] w-full flex-col justify-center">
+        <div className="flex h-page-container w-full flex-col justify-center">
           <LoaderPlaceholder />
         </div>
       }

apps/console/src/routes/_authenticated/organization/route.tsx

@@ -507,6 +507,7 @@ function OrganizationRoute() {
     enabled: Boolean(environmentId) && Boolean(serviceId),
   })
   const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const bannersRef = useRef<HTMLDivElement>(null)
   const assistantAnchorRef = useRef<HTMLDivElement>(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) */}
           <div ref={scrollContainerRef} className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
             <ErrorBoundary>
-              <OrganizationBanners />
+              <div ref={bannersRef}>
+                <OrganizationBanners />
+              </div>
               <Header />
 
               <Suspense fallback={<MainLoader />}>

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 (
-    <>
+    <div className="flex h-page-container flex-col overflow-hidden">
       {showBannerNew && (
         <Banner
           color="brand"
+          className="shrink-0"
           buttonLabel="See latest"
           buttonIconRight="arrow-right"
           onClickButton={() =>
@@ -192,9 +193,8 @@ export function DeploymentLogsContent({
         environmentStatus={environmentStatus}
         stage={stageFromServiceId}
         preCheckStage={preCheckStage}
-        hasNewDeploymentBanner={showBannerNew}
       />
-    </>
+    </div>
   )
 }
 

libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs.tsx

@@ -26,15 +26,15 @@ const WebSocketListenerMemo = memo(MetricsWebSocketListener)
 
 function Loader() {
   return (
-    <div className="flex h-[calc(100vh-125px)] flex-col">
+    <div className="flex h-page-container flex-col">
       <div className="flex h-12 items-center gap-3 border-b border-neutral px-4">
         <Skeleton width={105} height={28} />
         <Skeleton width={124} height={28} />
         <Skeleton width={80} height={28} />
         <Skeleton width={305} height={28} />
       </div>
 
-      <div className="flex h-[calc(100%-48px)] flex-col items-center justify-between">
+      <div className="flex min-h-0 flex-1 flex-col items-center justify-between">
         <div className="flex h-full flex-col items-center justify-center">
           <LoaderPlaceholder />
         </div>

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 (
-      <div className={clsx(emptyStateHeightClass, 'w-full')}>
+      <div className="min-h-0 w-full flex-1">
         <div className="flex h-full flex-col items-center justify-between bg-background">
           <div className="flex h-full flex-col items-center justify-center">
             <DeploymentLogsPlaceholder
@@ -527,7 +521,7 @@ function DeploymentLogsBody({
         </div>
       </div>
       <div
-        className={clsx(logsViewportHeightClass, 'w-full overflow-y-scroll')}
+        className="min-h-0 w-full flex-1 overflow-y-scroll"
         ref={refScrollSection}
         onScroll={handleScroll}
         onWheel={(event) => {
@@ -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 (
-    <div className="h-full w-full overflow-hidden">
-      <div className="relative h-full bg-background">
-        <DeploymentLogsHeader
-          environment={environment}
-          serviceStatus={serviceStatus}
-          environmentStatus={environmentStatus}
-          deploymentHistory={deploymentHistory}
-        />
-        <DeploymentLogsBody
-          key={executionId || 'latest'}
-          environment={environment}
-          serviceStatus={serviceStatus}
-          stage={stage}
-          environmentStatus={environmentStatus}
-          preCheckStage={preCheckStage}
-          deploymentHistory={deploymentHistory}
-          hasNewDeploymentBanner={hasNewDeploymentBanner}
-        />
-      </div>
+    <div className="relative flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-background">
+      <DeploymentLogsHeader
+        environment={environment}
+        serviceStatus={serviceStatus}
+        environmentStatus={environmentStatus}
+        deploymentHistory={deploymentHistory}
+      />
+      <DeploymentLogsBody
+        key={executionId || 'latest'}
+        environment={environment}
+        serviceStatus={serviceStatus}
+        stage={stage}
+        environmentStatus={environmentStatus}
+        preCheckStage={preCheckStage}
+        deploymentHistory={deploymentHistory}
+      />
     </div>
   )
 }