jaredandClaude Opus 4.8
d615999737
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>
42 lines
1018 B
TypeScript
42 lines
1018 B
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, config } from 'folds';
|
|
import { ContainerColor } from '../../styles/ContainerColor.css';
|
|
|
|
export const CardGrid = style({
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
gap: config.space.S400,
|
|
'@media': {
|
|
// Cards squish/overflow below ~360px each; drop to a single column on phones
|
|
// (mirrors the 750px breakpoint the nav uses).
|
|
'(max-width: 750px)': { gridTemplateColumns: '1fr' },
|
|
},
|
|
});
|
|
|
|
export const RoomCardBase = style([
|
|
DefaultReset,
|
|
ContainerColor({ variant: 'SurfaceVariant' }),
|
|
{
|
|
padding: config.space.S500,
|
|
borderRadius: config.radii.R500,
|
|
},
|
|
]);
|
|
|
|
export const RoomCardTopic = style({
|
|
minHeight: `calc(3 * ${config.lineHeight.T200})`,
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 3,
|
|
WebkitBoxOrient: 'vertical',
|
|
overflow: 'hidden',
|
|
cursor: 'pointer',
|
|
|
|
':hover': {
|
|
textDecoration: 'underline',
|
|
},
|
|
});
|
|
|
|
export const ActionButton = style({
|
|
flex: '1 1 0',
|
|
minWidth: 1,
|
|
});
|