feat(messages): collapse reactions to one row with a +N chip (#138)

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

src/app/features/room/message/styles.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { DefaultReset, config, toRem } from 'folds';
+import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
 
 export const MessageBase = style({
   position: 'relative',
@@ -45,6 +45,7 @@ export const MessageMenuItemText = style({
 });
 
 export const ReactionsContainer = style({
+  position: 'relative',
   selectors: {
     '&:empty': {
       display: 'none',
@@ -52,6 +53,27 @@ export const ReactionsContainer = style({
   },
 });
 
+/** [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',
 });