fix(mobile): stack embed cards + secondary 44px touch targets (r2)
Mobile follow-ups round 2 (survey findings deferred from the mobile audit), reviewed by 2 agents on the staged diff (both SHIP). - URL-preview cards: the Twitch / Twitter / TikTok-fallback cards render their thumbnail/header BESIDE the content as direct children of the UrlPreview flex row, which squeezes both on a phone. Add `StackOnMobile` (@media max-width:750px -> flex-direction:column) scoped to those variants via cardClass. folds Box has no default `direction`, so the override wins uncontested; desktop (>750px) is unchanged. No-op for the single-column embed cards (MediaEmbedCard/TikTokEmbedCard). - 44px touch targets (MobileTouchTarget, @media max-width:750px) on the otherwise ~28px controls: embed-player Close/Collapse/Fullscreen/View-post buttons; image-viewer close/zoom/download; the read-receipt "seen by" pill. Deferred (rationale, not built): PiP resize handles + fullscreen button — enlarging four 24px corners to 44px would swallow a ~160px mobile PiP and block "Return to call"; presence dot is a non-interactive status indicator. Gates: tsc 0, eslint 0, prettier clean, 856/856 tests, build ok. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -22,6 +22,7 @@ import { stopPropagation } from '../../utils/keyboard';
|
||||
import { useModalStyle } from '../../hooks/useModalStyle';
|
||||
import { useMemberAvatar } from '../../hooks/useMemberAvatar';
|
||||
import { useRoomMembersChange } from '../../hooks/useRoomMemberChange';
|
||||
import { MobileTouchTarget } from '../../styles/mobile.css';
|
||||
import * as css from './ReadReceiptAvatars.css';
|
||||
|
||||
const MAX_DISPLAY = 5;
|
||||
@@ -92,7 +93,7 @@ export function ReadReceiptAvatars({
|
||||
onClick={() => setOpen(true)}
|
||||
title={tooltipNames}
|
||||
aria-label={tooltipNames}
|
||||
className={css.ReceiptTrigger}
|
||||
className={`${css.ReceiptTrigger} ${MobileTouchTarget}`}
|
||||
>
|
||||
{/* Pill wrapper ensures visibility on any wallpaper/background */}
|
||||
<span
|
||||
|
||||
Reference in New Issue
Block a user