fix(reactions): the reactions row no longer flickers or loses its spacing (#305)

Two bugs in the one-row "+N" collapse:
- measure() used the border box, which grows by 4 px while collapsed
  (margin -2 / padding 2), so a row within 4 px of fitting flipped
  collapsed↔expanded every frame (flicker, layout shifts, ~11 % of a core
  per looping message). It now measures the content box.
- The collapsed style used the `margin` shorthand, which overrode the
  timeline's marginTop and, when removed, cleared it; the row then stuck
  to the message text. Longhand margins keep marginTop (minus 2 px).

Verified headless (12 reactions, viewport sweep 1300–1400 px): before,
90 style flips in 1.5 s at 1344 px and margin-top 0px after a cycle;
now 0 flips at every width and margin-top stays 8px.

Fixes #305

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/features/message-search/useMessageSearch.test.ts

@@ -1,7 +1,6 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import {
-  foldEdits,
   filterGroupsByDateRange,
   filterGroupsByMsgType,
   filterGroupsByPinned,
@@ -110,47 +109,3 @@ test('filterGroupsByPinned: keeps pinned items and drops empty groups', () => {
     ['$2'],
   );
 });
-
-const sr = (eventId: string, ts: number, content: Record<string, unknown>) =>
-  ({
-    rank: 1,
-    result: {
-      event_id: eventId,
-      room_id: '!r:x',
-      origin_server_ts: ts,
-      type: 'm.room.message',
-      content,
-    },
-  }) as unknown as Parameters<typeof foldEdits>[0][number];
-
-test('foldEdits: one row per message, showing the latest edit (#288)', () => {
-  const edit = (id: string, ts: number, body: string) =>
-    sr(id, ts, {
-      body: `* ${body}`,
-      'm.new_content': { body },
-      'm.relates_to': { rel_type: 'm.replace', event_id: '$orig' },
-    });
-  const out = foldEdits([
-    edit('$e2', 30, 'Tuesday 11am room B'),
-    sr('$orig', 10, { body: 'Monday 10am room A' }),
-    edit('$e1', 20, 'Tuesday 10am room A'),
-    sr('$other', 5, { body: 'meeting notes' }),
-  ]);
-  assert.deepEqual(
-    out.map((r) => r.result.event_id),
-    ['$orig', '$other'],
-  );
-  assert.deepEqual(out[0].result.content['m.new_content'], { body: 'Tuesday 11am room B' });
-  assert.equal(out[0].result.content.body, 'Monday 10am room A');
-});
-
-test('foldEdits: an edit whose original did not match stands in for it', () => {
-  const out = foldEdits([
-    sr('$e1', 20, {
-      'm.new_content': { body: 'x' },
-      'm.relates_to': { rel_type: 'm.replace', event_id: '$orig' },
-    }),
-  ]);
-  assert.equal(out.length, 1);
-  assert.equal(out[0].result.event_id, '$orig');
-});

src/app/features/message-search/useMessageSearch.ts

@@ -96,58 +96,10 @@ export const filterGroupsByDateRange = (
     .filter((group) => group.items.length > 0);
 };
 
-/**
- * [Gitea #288] Server search also returns `m.replace` events, so an edited
- * message showed once per version. Fold each edit into its message: one row,
- * at the first position any version ranked, showing the latest text and
- * pointing at the original event (so "jump" lands on the real message).
- */
-export const foldEdits = (results: ISearchResult[]): ISearchResult[] => {
-  const targetOf = (r: ISearchResult): string => {
-    const rel = r.result.content?.['m.relates_to'];
-    return rel?.rel_type === 'm.replace' && typeof rel.event_id === 'string'
-      ? rel.event_id
-      : r.result.event_id;
-  };
-  const isEdit = (r: ISearchResult) => targetOf(r) !== r.result.event_id;
-  const order: string[] = [];
-  const originals = new Map<string, ISearchResult>();
-  const latestEdit = new Map<string, ISearchResult>();
-  results.forEach((r) => {
-    const target = targetOf(r);
-    if (!originals.has(target) && !latestEdit.has(target)) order.push(target);
-    if (!isEdit(r)) {
-      originals.set(target, r);
-      return;
-    }
-    const prev = latestEdit.get(target);
-    if (!prev || r.result.origin_server_ts > prev.result.origin_server_ts)
-      latestEdit.set(target, r);
-  });
-  return order.map((target) => {
-    const original = originals.get(target);
-    const edit = latestEdit.get(target);
-    const newContent = edit?.result.content?.['m.new_content'];
-    if (original && !newContent) return original;
-    if (original) {
-      return {
-        ...original,
-        result: {
-          ...original.result,
-          content: { ...original.result.content, 'm.new_content': newContent },
-        },
-      };
-    }
-    // Only an edit matched: show it as its message.
-    const only = edit as ISearchResult;
-    return { ...only, result: { ...only.result, event_id: target } };
-  });
-};
-
 const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => {
   const groups: ResultGroup[] = [];
 
-  foldEdits(results).forEach((item) => {
+  results.forEach((item) => {
     const roomId = item.result.room_id;
     const resultItem: ResultItem = {
       rank: item.rank,

src/app/features/room/message/Reactions.tsx

@@ -69,8 +69,15 @@ export const Reactions = as<'div', ReactionsProps>(
     const measure = useCallback(() => {
       const container = containerRef.current;
       if (!container) return;
-      const rowWidth = container.getBoundingClientRect().width;
-      const gap = parseFloat(getComputedStyle(container).columnGap) || 8;
+      // [Gitea #305] The width the chips actually get (content box). The border
+      // box grows by 4 px while collapsed (margin -2 / padding 2), and measuring
+      // it made a row within 4 px of fitting flip collapsed↔expanded every frame.
+      const cs = getComputedStyle(container);
+      const rowWidth =
+        container.clientWidth -
+        (parseFloat(cs.paddingLeft) || 0) -
+        (parseFloat(cs.paddingRight) || 0);
+      const gap = parseFloat(cs.columnGap) || 8;
       const chips = keys ? keys.split('\u0000').map((k) => chipRefs.current.get(k)) : [];
       const widths = chips.map((el) => el?.getBoundingClientRect().width ?? 0);
       const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 48;
@@ -110,8 +117,21 @@ export const Reactions = as<'div', ReactionsProps>(
         style={{
           ...props.style,
           ...(collapsed && rowHeight
-            ? // 2px breathing room so row-1 focus outlines are not clipped.
-              { maxHeight: rowHeight + 4, overflow: 'hidden', padding: 2, margin: -2 }
+            ? // 2px breathing room so row-1 focus outlines are not clipped. Longhand
+              // margins so the timeline's marginTop survives (Gitea #305: the
+              // `margin` shorthand overrode it and, once removed, cleared it).
+              {
+                maxHeight: rowHeight + 4,
+                overflow: 'hidden',
+                padding: 2,
+                marginLeft: -2,
+                marginRight: -2,
+                marginBottom: -2,
+                marginTop:
+                  props.style?.marginTop !== undefined
+                    ? `calc(${typeof props.style.marginTop === 'number' ? `${props.style.marginTop}px` : props.style.marginTop} - 2px)`
+                    : -2,
+              }
             : {}),
         }}
         ref={(el) => {