jaredandClaude Opus 5
bf05751eca
CI / Build & Quality Checks (push) Successful in 1m36s
CI / Docker image build & smoke test (push) Skipped
CI / Secret scan (gitleaks) (push) Successful in 10s
CI / Trigger Desktop Build (push) Canceled after 0s
CI / Playwright smoke (e2e) (push) Canceled after 0s
Many distinct reactions used to wrap into a tall stack (16 reactions = 4 rows at phone width). Now only the first row is shown, ending in a "+N" chip; tapping it expands inline and a "less" chip collapses again. Expanded state is remembered per message for the session. Nothing changes when the reactions already fit on one row. Overflowing chips stay in the DOM (invisible, aria-hidden, untabbable, clipped by max-height) so the container keeps its natural width — which keeps shrink-to-fit bubble layout stable — and each chip stays measurable. utils/reactionOverflow.ts holds the unit-tested fit calculation; a ResizeObserver re-fits on width changes. "+N" is forced LTR for RTL UIs. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
80 lines
1.6 KiB
TypeScript
80 lines
1.6 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
|
|
|
|
export const MessageBase = style({
|
|
position: 'relative',
|
|
});
|
|
export const MessageBaseBubbleCollapsed = style({
|
|
paddingTop: 0,
|
|
});
|
|
|
|
export const MessageOptionsBase = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
top: toRem(-30),
|
|
right: 0,
|
|
zIndex: 1,
|
|
},
|
|
]);
|
|
export const MessageOptionsBar = style([
|
|
DefaultReset,
|
|
{
|
|
padding: config.space.S100,
|
|
},
|
|
]);
|
|
|
|
export const BubbleAvatarBase = style({
|
|
paddingTop: 0,
|
|
});
|
|
|
|
export const MessageAvatar = style({
|
|
cursor: 'pointer',
|
|
});
|
|
|
|
export const MessageQuickReaction = style({
|
|
minWidth: toRem(32),
|
|
});
|
|
|
|
export const MessageMenuGroup = style({
|
|
padding: config.space.S100,
|
|
});
|
|
|
|
export const MessageMenuItemText = style({
|
|
flexGrow: 1,
|
|
});
|
|
|
|
export const ReactionsContainer = style({
|
|
position: 'relative',
|
|
selectors: {
|
|
'&:empty': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
});
|
|
|
|
/** [Gitea #138] "+N" / "less" chip at the end of a collapsed reaction row. */
|
|
export const ReactionsMore = style([
|
|
FocusOutline,
|
|
{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
flexShrink: 0,
|
|
padding: `${toRem(2)} ${config.space.S200}`,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
backgroundColor: 'transparent',
|
|
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R300,
|
|
cursor: 'pointer',
|
|
selectors: {
|
|
'&:hover, &:focus-visible': {
|
|
backgroundColor: color.SurfaceVariant.ContainerHover,
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const ReactionsTooltipText = style({
|
|
wordBreak: 'break-word',
|
|
});
|