DenozordecandCursor
9a87d0c82c
Build, Test, and Push CFDM Docker Image / test (push) Failing after 46s
Build, Test, and Push CFDM Docker Image / build-and-push (push) Has been skipped
Build, Test, and Push CFDM Docker Image / update-wiki (push) Has been skipped
Build, Test, and Push CFDM Docker Image / create-release (push) Has been skipped
- Integrated debug logging in main application file to track boot process. - Added layout width logging in PageShell and various ReUI components to monitor rendering dimensions. - Implemented chart size logging in dashboard analytics components for better performance insights. - Enhanced OpsDashboard and ResourcePage with width tracking to improve layout responsiveness. Co-authored-by: Cursor <cursoragent@cursor.com>
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { useEffect, useRef, type ReactNode } from 'react'
|
|
import { useRouterState } from '@tanstack/react-router'
|
|
import { cn } from '@cfdm/ui/lib/utils'
|
|
import { DEBUG_BUILD_STAMP, debugAgentLog } from '@/lib/debug-agent-log'
|
|
|
|
interface PageShellProps {
|
|
children: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function PageShell({ children, className }: PageShellProps) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const pathname = useRouterState({ select: (s) => s.location.pathname })
|
|
|
|
useEffect(() => {
|
|
const el = ref.current
|
|
if (!el) return
|
|
const main = el.closest('main')
|
|
const mainWidth = main?.clientWidth ?? 0
|
|
const shellWidth = el.clientWidth
|
|
const child = el.firstElementChild as HTMLElement | null
|
|
const childWidth = child?.clientWidth ?? 0
|
|
const childMaxWidth = child ? getComputedStyle(child).maxWidth : 'none'
|
|
debugAgentLog(
|
|
'page-shell.tsx:mount',
|
|
'page layout widths',
|
|
{
|
|
buildStamp: DEBUG_BUILD_STAMP,
|
|
pathname,
|
|
mainWidth,
|
|
shellWidth,
|
|
childWidth,
|
|
childMaxWidth,
|
|
shellClass: el.className,
|
|
childClass: child?.className ?? null,
|
|
},
|
|
'A',
|
|
)
|
|
}, [pathname])
|
|
|
|
return (
|
|
<div ref={ref} className={cn('flex flex-col gap-4 md:gap-6', className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|