refactor(web): streamline component structure by removing unused refs and logging

- Removed unnecessary useRef and useEffect hooks from PageShell, OpsDashboard, ResourcePage, SettingsShell, and other components to simplify code and improve maintainability.
- Updated components to utilize direct className assignments for layout without relying on refs for width logging.
- Introduced CountedLineTabs in various components to enhance tab functionality and improve user experience.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useRef, type ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { Link, Outlet, useRouterState } from '@tanstack/react-router'
 import { SettingsIcon } from 'lucide-react'
 
 import { useIsMobile } from '@cfdm/ui/hooks/use-mobile'
 import { cn } from '@cfdm/ui/lib/utils'
 import { PageShell } from '@/components/page-shell'
-import { debugAgentLog } from '@/lib/debug-agent-log'
 
 export interface SettingsTabConfig {
   id: string
@@ -35,28 +34,11 @@ export function SettingsShell({
   tabs = DEFAULT_TABS,
 }: SettingsShellProps) {
   const isMobile = useIsMobile()
-  const rootRef = useRef<HTMLDivElement>(null)
   const pathname = useRouterState({ select: (s) => s.location.pathname })
 
-  useEffect(() => {
-    const el = rootRef.current
-    if (!el) return
-    debugAgentLog(
-      'settings-shell.tsx:mount',
-      'settings shell width',
-      {
-        pathname,
-        clientWidth: el.clientWidth,
-        maxWidth: getComputedStyle(el).maxWidth,
-        className: el.className,
-      },
-      'A',
-    )
-  }, [pathname])
-
   return (
     <PageShell>
-      <div ref={rootRef} className="mx-auto flex w-full max-w-4xl flex-col gap-6">
+      <div className="mx-auto flex w-full max-w-4xl flex-col gap-6">
         <header className="px-1">
           <div className="flex flex-col gap-px">
             <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
@@ -78,7 +60,7 @@ export function SettingsShell({
               className={cn(
                 'flex gap-1',
                 isMobile
-                  ? 'scrollbar-none -mx-1 overflow-x-auto pb-1'
+                  ? 'scrollbar-none -mx-1 overflow-x-auto overflow-y-hidden pb-1'
                   : 'w-44 shrink-0 flex-col',
               )}
             >