diff --git a/harness/estate/drive.cjs b/harness/estate/drive.cjs index 0dd254de..fae012a6 100644 --- a/harness/estate/drive.cjs +++ b/harness/estate/drive.cjs @@ -68,7 +68,7 @@ const HEADERS = ['GameCult', 'Projects', 'nibu', 'eureka', 'Nibu', 'Eureka', 'El if (!(await loc.count())) { tl.push(`no Join ${name}`); return; } await loc.first().click(); tl.push(`CLICK Join ${name} ${t()}`); await pg.waitForTimeout(21500); await snap(`5-slow-${name.replace(/\W/g, '')}-21s`); - tl.push(`timeout msg shown: ${(await text()).includes('has not arrived yet')}`); + tl.push(`timeout msg shown: ${(await text()).includes('still on its way')}`); await pg.waitForTimeout(5500); await snap(`5-slow-${name.replace(/\W/g, '')}-27s`); tl.push(`after arrival: Join ${name} still present=${await pg.locator(`[aria-label="Join ${name}"]`).count()} url=${pg.url()}`); }; diff --git a/harness/estate/run.sh b/harness/estate/run.sh index c499cc5b..e044d07d 100644 --- a/harness/estate/run.sh +++ b/harness/estate/run.sh @@ -22,6 +22,7 @@ for t in root noroot; do echo "=== $t" grep -E '^(SMALL|layout|has Create|CLICK|POLL|timeout|after arrival|revealed|--- )' /out/$t-timeline.txt | cut -c1-1800 || true done +ls -la /out | head -30 echo "=== m.direct and joins (root)" grep -E 'direct|JOIN' /out/hslog-root.txt | cut -c1-220 || true tail -1 /out/build.log diff --git a/src/app/features/estate/EstateNavigator.css.ts b/src/app/features/estate/EstateNavigator.css.ts new file mode 100644 index 00000000..157d69cd --- /dev/null +++ b/src/app/features/estate/EstateNavigator.css.ts @@ -0,0 +1,14 @@ +import { globalStyle, style } from '@vanilla-extract/css'; +import { MOBILE_BREAKPOINT } from '../../hooks/useScreenSize'; + +/** On phones every control inside the navigator is at least 44 px square to tap. */ +export const Targets = style({}); + +globalStyle(`${Targets} button, ${Targets} a`, { + '@media': { + [`screen and (max-width: ${MOBILE_BREAKPOINT}px)`]: { + minHeight: 44, + minWidth: 44, + }, + }, +}); diff --git a/src/app/features/estate/EstateNavigator.tsx b/src/app/features/estate/EstateNavigator.tsx index 63d0c0c2..e36bfb04 100644 --- a/src/app/features/estate/EstateNavigator.tsx +++ b/src/app/features/estate/EstateNavigator.tsx @@ -45,13 +45,12 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { EstateRoom, EstateTier } from './buildEstate'; import { activateEstateRoom, awaitMyJoin } from './joinEstateRoom'; import { useEstate, useEstateRootId } from './useEstate'; +import * as css from './EstateNavigator.css'; /** How long a tap waits for the client store to hold the room it just joined. */ const JOIN_ARRIVAL_TIMEOUT_MS = 20000; /** How long after a timed-out tap the store may still deliver the room and have its DM filed. */ const LATE_ARRIVAL_WINDOW_MS = 10 * 60 * 1000; -/** Minimum tap target on phones. */ -const TOUCH_TARGET = 44; const estateRoomPath = (mx: ReturnType, room: EstateRoom): string => { const alias = getCanonicalAliasOrRoomId(mx, room.roomId); @@ -66,7 +65,6 @@ const estateRoomPath = (mx: ReturnType, room: EstateRoom function JoinRow({ room }: { room: EstateRoom }) { const mx = useMatrixClient(); const navigate = useNavigate(); - const mobile = useScreenSizeContext() === ScreenSize.Mobile; const [state, join] = useAsyncCallback( useCallback(async () => { const userId = mx.getSafeUserId(); @@ -96,12 +94,7 @@ function JoinRow({ room }: { room: EstateRoom }) { return ( - + {room.name} @@ -123,7 +116,6 @@ function JoinRow({ room }: { room: EstateRoom }) { before={busy ? : } onClick={join} disabled={busy} - style={mobile ? { minHeight: TOUCH_TARGET, minWidth: TOUCH_TARGET } : undefined} aria-label={`Join ${room.name}`} > Join @@ -311,7 +303,7 @@ export function EstateNavigator() { return ( - + {title} @@ -327,7 +319,7 @@ export function EstateNavigator() { - + {rootId && } {!rootId && error && ( @@ -340,7 +332,14 @@ export function EstateNavigator() { )} - +