rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve how resize handles are displayed on the executive meetings page

Browse Source 
Adjust logic to hide resize handles on touch devices and non-large screens.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 78b3f620-f6d4-4b0b-82c3-1928d988a31a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/RZuzKd2
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-04-29 06:55:50 +00:00
parent 5b35261785
commit 30ea1facd3
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/executive-meetings.tsx
+8 -5
View File
@@ -690,9 +690,12 @@ function ScheduleSection({
// colgroup and per-cell widths so they're available whenever the table is // colgroup and per-cell widths so they're available whenever the table is
// in fixed-layout mode (xl screens AND any print). In `table-auto` mode, // in fixed-layout mode (xl screens AND any print). In `table-auto` mode,
// the browser treats those widths as hints and shrinks columns to fit. // the browser treats those widths as hints and shrinks columns to fit.
// Resize handles, however, are screen-only and gated on isXl since they // Resize handles only appear on large screens AND fine pointers (mouse).
// need viewport-driven layout to work. // Touch devices — including iPad Pro at >=1280 CSS px — get no handles
// since drag-resizing with a finger fights touch scrolling.
const isXl = useMediaQuery("(min-width: 1280px)"); const isXl = useMediaQuery("(min-width: 1280px)");
const isFinePointer = useMediaQuery("(pointer: fine)");
const showResizeHandles = isXl && isFinePointer;
return ( return (
<div className="space-y-4 print:space-y-2"> <div className="space-y-4 print:space-y-2">
@@ -789,9 +792,9 @@ function ScheduleSection({
data-testid={`em-col-header-${c.id}`} data-testid={`em-col-header-${c.id}`}
> >
{t(`executiveMeetings.col.${c.id}`)} {t(`executiveMeetings.col.${c.id}`)}
{/* Resize handles are screen-only; need viewport-driven {/* Resize handles only render on large screens AND fine
layout to be useful, so gated to ≥xl. */} (mouse) pointers — see comment on showResizeHandles. */}
{!isLast && isXl && ( {!isLast && showResizeHandles && (
<ResizeHandle <ResizeHandle
isRtl={isRtl} isRtl={isRtl}
onResize={(delta) => setColumnWidth(c.id, c.width + delta)} onResize={(delta) => setColumnWidth(c.id, c.width + delta)}