jaredandClaude Opus 4.8
154e35ef9f
From the 6-agent deep per-feature audit. Mobile-gated / consistency fixes; desktop unchanged except two intentional dialog-width normalizations noted below. - In-call control bar: wrap="Wrap" on the SequenceCard so the compact two-group row wraps on the narrowest phones (<=390px) instead of pushing End off-screen (M1 fixed the 500-750px band; this covers narrower). Desktop stays one row. - In-call soundboard popout: clamp maxWidth to the viewport (like M5's screenshare popover) so it can't overflow a narrow phone. - Report-Message dialog + "Seen by" (EventReaders) modals (Message.tsx x2 + RoomViewFollowing): add useModalStyle so they go full-screen on mobile like their sibling report/receipt modals (they floated as fixed cards before). - In-app toast container: full-width toasts inset from both edges on mobile (ScreenSize.Mobile); a fixed 280-340px card previously overflowed a narrow phone. Desktop byte-identical (bottom-right floating card). - Policy-list tabs + audio-controls rows: wrap="Wrap" (inert on desktop). Intentional desktop deltas (normalizing to existing sibling modals, verified by two review passes as consistent, not regressions): Report dialog max-width 380->480px; EventReaders modals 460->360px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
28 lines
840 B
TypeScript
28 lines
840 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box, as } from 'folds';
|
|
|
|
export type MediaControlProps = {
|
|
before?: ReactNode;
|
|
after?: ReactNode;
|
|
leftControl?: ReactNode;
|
|
rightControl?: ReactNode;
|
|
};
|
|
export const MediaControl = as<'div', MediaControlProps>(
|
|
({ before, after, leftControl, rightControl, children, ...props }, ref) => (
|
|
<Box grow="Yes" direction="Column" gap="300" {...props} ref={ref}>
|
|
{before && <Box direction="Column">{before}</Box>}
|
|
<Box alignItems="Center" gap="200" wrap="Wrap">
|
|
<Box alignItems="Center" grow="Yes" gap="Inherit">
|
|
{leftControl}
|
|
</Box>
|
|
|
|
<Box justifyItems="End" alignItems="Center" gap="Inherit">
|
|
{rightControl}
|
|
</Box>
|
|
</Box>
|
|
{after && <Box direction="Column">{after}</Box>}
|
|
{children}
|
|
</Box>
|
|
),
|
|
);
|