fix(mobile): overflow breaks — tables, composer, call bar, previews, cards (M1)
Mobile-audit batch 1. All fixes reuse cinny's own responsive primitives and are mobile-gated so desktop is unchanged. - Message tables: wrap <table> in an overflow-x container so a wide table scrolls instead of overflowing the message column / page body. - Composer toolbar: let the before|editable|after row and the toolbar wrap on phones (@media <=750px) instead of squeezing the editable to zero and pushing Send off-screen. - In-call control bar: collapse to the compact/stacked layout on a mobile viewport (ScreenSize.Mobile) too, not just when the bar's own container is <500px — fixes the 500-750px band where the control row overflowed. - URL-preview card: base width toRem(400) -> min(25rem, 92vw) so a single card fits a narrow phone (still exactly 400px on desktop). - Explore card grid: drop to one column at <=750px (was a fixed 3-col grid). Two review passes: desktop behavior provably unchanged (all gated by @media / ScreenSize.Mobile; the table wrapper only contains previously-overflowing tables). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -124,7 +124,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
|
||||
<div className={css.Editor} ref={ref}>
|
||||
<Slate editor={editor} initialValue={initialValue} onChange={onChange}>
|
||||
{top}
|
||||
<Box alignItems="Start">
|
||||
<Box className={css.EditorInputRow} alignItems="Start">
|
||||
{before && (
|
||||
<Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
|
||||
{before}
|
||||
|
||||
Reference in New Issue
Block a user