28cc3da3cc
The row around a bubble sized to its content in a right-aligned column, and the quote's nowrap text made that content 782px, so on a phone the column ran off the left edge. The row, column and bubble now carry minWidth 0 / maxWidth 100%, and ReplyContent minWidth 0 so the quote truncates. Starfire 390x844: own quote 782px at left -425 -> 332px at left 25; desktop inside the bubble. No test yet. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
42 lines
727 B
TypeScript
42 lines
727 B
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { config, toRem } from 'folds';
|
|
|
|
export const ReplyBend = style({
|
|
flexShrink: 0,
|
|
});
|
|
|
|
export const ThreadIndicator = style({
|
|
opacity: config.opacity.P300,
|
|
|
|
selectors: {
|
|
'button&': {
|
|
cursor: 'pointer',
|
|
},
|
|
':hover&': {
|
|
opacity: config.opacity.P500,
|
|
},
|
|
},
|
|
});
|
|
|
|
export const Reply = style({
|
|
marginBottom: toRem(1),
|
|
minWidth: 0,
|
|
maxWidth: '100%',
|
|
minHeight: config.lineHeight.T300,
|
|
selectors: {
|
|
'button&': {
|
|
cursor: 'pointer',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const ReplyContent = style({
|
|
minWidth: 0,
|
|
opacity: config.opacity.P300,
|
|
|
|
selectors: {
|
|
[`${Reply}:hover &`]: {
|
|
opacity: config.opacity.P500,
|
|
},
|
|
},
|
|
});
|