From 00bc3dd374430196c178949db6416aeb816780c6 Mon Sep 17 00:00:00 2001 From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com> Date: Mon, 4 May 2026 17:55:36 +0000 Subject: [PATCH] Add zoom and fullscreen controls to the meeting schedule table Add zoom and fullscreen controls to the executive meeting schedule page, including zoom in/out buttons, a fullscreen toggle, and Escape key handling for exiting fullscreen. The heading height calculation has been removed and hardcoded to 0px. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 608173c1-6210-41cf-be7d-3a913963059f Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/jwG0a8d Replit-Helium-Checkpoint-Created: true --- .../tx-os/src/pages/executive-meetings.tsx | 90 +++++++++++++----- attached_assets/image_1777917044588.png | Bin 0 -> 1762 bytes 2 files changed, 64 insertions(+), 26 deletions(-) create mode 100644 attached_assets/image_1777917044588.png diff --git a/artifacts/tx-os/src/pages/executive-meetings.tsx b/artifacts/tx-os/src/pages/executive-meetings.tsx index cc3d3df6..97d80f78 100644 --- a/artifacts/tx-os/src/pages/executive-meetings.tsx +++ b/artifacts/tx-os/src/pages/executive-meetings.tsx @@ -43,6 +43,10 @@ import { ChevronLeft, ChevronRight, Search, + Maximize, + Minimize2, + ZoomIn, + ZoomOut, } from "lucide-react"; import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"; import { Button } from "@/components/ui/button"; @@ -1145,6 +1149,14 @@ function ScheduleSection({ // matched against title, attendee names/titles, location, notes, and // any merge text on the row. Empty needle → pass-through. const [searchQuery, setSearchQuery] = useState(""); + const [tableZoom, setTableZoom] = useState(90); + const [isFullscreen, setIsFullscreen] = useState(false); + useEffect(() => { + if (!isFullscreen) return; + const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setIsFullscreen(false); }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [isFullscreen]); // Reset whenever the active day changes — a search is "scoped to the // currently visible date" per the spec, so jumping days clears it. useEffect(() => { @@ -2351,28 +2363,12 @@ function ScheduleSection({ [reorderRows], ); - // #267: Same dynamic-measurement trick as the page header — the title - // row wraps on narrow widths (heading + edit toggle + date picker), so - // we publish its live height so the table thead can sit flush below. const headingRef = useRef(null); useEffect(() => { - const heading = headingRef.current; - if (!heading) return; - const root = heading.closest("[data-em-root]"); - if (!root) return; - const update = () => { - root.style.setProperty("--em-heading-h", `${heading.offsetHeight}px`); - }; - update(); - const ro = new ResizeObserver(update); - ro.observe(heading); - window.addEventListener("resize", update); + const root = document.querySelector("[data-em-root]"); + if (root) root.style.setProperty("--em-heading-h", "0px"); return () => { - ro.disconnect(); - window.removeEventListener("resize", update); - // Reset so other sections (which don't render this heading) don't - // inherit a stale offset for any sticky descendants. - root.style.setProperty("--em-heading-h", "0px"); + if (root) root.style.setProperty("--em-heading-h", "0px"); }; }, []); @@ -2478,6 +2474,35 @@ function ScheduleSection({ clearLabel={t("executiveMeetings.schedule.searchClear")} isRtl={isRtl} /> +
+ + {tableZoom}% + +
+