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>
87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, config, DefaultReset, toRem } from 'folds';
|
|
|
|
export const Editor = style([
|
|
DefaultReset,
|
|
{
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R400,
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const EditorOptions = style([
|
|
DefaultReset,
|
|
{
|
|
padding: config.space.S200,
|
|
'@media': {
|
|
// On phones the toolbar can hold many 44px buttons; let them wrap to a
|
|
// second line instead of overflowing horizontally.
|
|
'(max-width: 750px)': { flexWrap: 'wrap' },
|
|
},
|
|
},
|
|
]);
|
|
|
|
// The composer's before | editable | after row. On phones, allow the toolbar
|
|
// (`after`) to wrap below the input instead of squeezing the editable to zero
|
|
// and pushing the Send button off-screen.
|
|
export const EditorInputRow = style({
|
|
'@media': {
|
|
'(max-width: 750px)': { flexWrap: 'wrap' },
|
|
},
|
|
});
|
|
|
|
export const EditorTextareaScroll = style({});
|
|
|
|
export const EditorTextarea = style([
|
|
DefaultReset,
|
|
{
|
|
flexGrow: 1,
|
|
height: '100%',
|
|
padding: `${toRem(13)} ${toRem(1)}`,
|
|
selectors: {
|
|
[`${EditorTextareaScroll}:first-child &`]: {
|
|
paddingLeft: toRem(13),
|
|
},
|
|
[`${EditorTextareaScroll}:last-child &`]: {
|
|
paddingRight: toRem(13),
|
|
},
|
|
'&:focus': {
|
|
outline: 'none',
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const EditorPlaceholderContainer = style([
|
|
DefaultReset,
|
|
{
|
|
opacity: config.opacity.Placeholder,
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
},
|
|
]);
|
|
|
|
export const EditorPlaceholderTextVisual = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'block',
|
|
paddingTop: toRem(13),
|
|
paddingLeft: toRem(1),
|
|
},
|
|
]);
|
|
|
|
export const EditorToolbarBase = style({
|
|
padding: `0 ${config.borderWidth.B300}`,
|
|
});
|
|
|
|
export const EditorToolbar = style({
|
|
padding: config.space.S100,
|
|
});
|
|
|
|
export const MarkdownBtnBox = style({
|
|
paddingRight: config.space.S100,
|
|
});
|