Merge branch 'deps/npm-audit-fixes' into fix/gif-card-aspect

Brings in #346 (npm audit fixes) so this PR's CI audit step passes; the
shared commit drops out of this PR's diff once #346 is merged into lotus.

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

package-lock.json

@@ -45,12 +45,12 @@
         "html-react-parser": "6.1.2",
         "i18next": "26.2.0",
         "i18next-browser-languagedetector": "8.2.1",
-        "i18next-http-backend": "4.0.0",
+        "i18next-http-backend": "4.0.2",
         "immer": "11.1.8",
         "is-hotkey": "0.2.0",
         "jotai": "2.20.0",
         "jsqr": "1.4.0",
-        "katex": "0.16.47",
+        "katex": "0.18.11",
         "linkify-react": "4.3.3",
         "linkifyjs": "4.3.3",
         "matrix-js-sdk": "41.7.0",
@@ -8168,9 +8168,9 @@
       }
     },
     "node_modules/i18next-http-backend": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-4.0.0.tgz",
-      "integrity": "sha512-EgSjO3Q1G6f2Q5oy7u9mmxuesE0oSfzAD97NFBjC8EmkK4guBSYLljM0Fng3DarMWIIkU70jfo4+mUzmyVISTA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-4.0.2.tgz",
+      "integrity": "sha512-oay62dIB2kL7+WHzoUXBjWfL3+mwijD3pQkQkIEaRLhy6kjXxUhrRenV0gInwlCASAaJaDy94+XvYizK+cAGdA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -9162,28 +9162,29 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.47",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
-      "integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
+      "version": "0.18.11",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.18.11.tgz",
+      "integrity": "sha512-yvyz/2VMKqoho/35Hat5w37wIEdWJ5ElVMidTAlWrxr5uW4aBGsEpveTmKh18/zw08v/7lGswCPon4OhqmqrTA==",
+      "deprecated": "Accidentally published with breaking changes. Use 0.19.0 instead.",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
       ],
       "license": "MIT",
       "dependencies": {
-        "commander": "^8.3.0"
+        "commander": "^15.0.0"
       },
       "bin": {
         "katex": "cli.js"
       }
     },
     "node_modules/katex/node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-15.0.0.tgz",
+      "integrity": "sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg==",
       "license": "MIT",
       "engines": {
-        "node": ">= 12"
+        "node": ">=22.12.0"
       }
     },
     "node_modules/keyv": {
@@ -12164,9 +12165,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }

package.json

@@ -72,12 +72,12 @@
     "html-react-parser": "6.1.2",
     "i18next": "26.2.0",
     "i18next-browser-languagedetector": "8.2.1",
-    "i18next-http-backend": "4.0.0",
+    "i18next-http-backend": "4.0.2",
     "immer": "11.1.8",
     "is-hotkey": "0.2.0",
     "jotai": "2.20.0",
     "jsqr": "1.4.0",
-    "katex": "0.16.47",
+    "katex": "0.18.11",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
     "matrix-js-sdk": "41.7.0",

src/app/components/url-preview/UrlPreview.css.tsx

@@ -1,5 +1,6 @@
 import { keyframes, style } from '@vanilla-extract/css';
 import { DefaultReset, color, config, toRem } from 'folds';
+import { GIF_PREVIEW_MAX_HEIGHT } from '../../utils/gifPreviewSize';
 
 export const UrlPreview = style([
   DefaultReset,
@@ -955,12 +956,14 @@ export const PortraitSideLayout = style([
 // GIF card (Giphy / Tenor)
 // ---------------------------------------------------------------------------
 
+// Full card width; a GIF narrower than the card (portrait, square, small) is
+// centred on the surface colour instead of being stretched and cropped.
 export const GifThumbnailWrapper = style([
   DefaultReset,
   {
-    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
     width: '100%',
-    maxHeight: toRem(200),
     overflow: 'hidden',
     flexShrink: 0,
     backgroundColor: color.Surface.Container,
@@ -972,14 +975,26 @@ export const GifThumbnailWrapper = style([
   },
 ]);
 
+// Wraps just the GIF so the "GIF" badge sits on the GIF's own corner.
+export const GifFrame = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    display: 'block',
+    maxWidth: '100%',
+  },
+]);
+
+// The inline width/aspect-ratio (from og:image:width/height) sets the size;
+// max-width lets a phone's narrower card shrink it, keeping the ratio.
 export const GifThumbnailImg = style([
   DefaultReset,
   {
-    width: '100%',
-    maxHeight: toRem(200),
-    objectFit: 'cover',
-    objectPosition: 'center',
     display: 'block',
+    maxWidth: '100%',
+    maxHeight: toRem(GIF_PREVIEW_MAX_HEIGHT),
+    height: 'auto',
+    objectFit: 'contain',
   },
 ]);
 

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -13,6 +13,7 @@ import {
   as,
   color,
   config,
+  toRem,
 } from 'folds';
 import { ImageOverlay } from '../ImageOverlay';
 import { MobileTouchTarget } from '../../styles/mobile.css';
@@ -48,6 +49,11 @@ import {
   tiktokOembedUrl,
   tiktokPlayerEmbedUrl,
 } from '../../utils/videoEmbed';
+import {
+  GIF_PREVIEW_MAX_HEIGHT,
+  GIF_PREVIEW_MAX_WIDTH,
+  gifPreviewBox,
+} from '../../utils/gifPreviewSize';
 
 const linkStyles = { color: color.Success.Main };
 
@@ -2277,6 +2283,9 @@ function GifCard({
 }) {
   const title = (prev['og:title'] as string | undefined) ?? '';
   const mxcImage = prev['og:image'] as string | undefined;
+  // Size the GIF from its own dimensions (Giphy and Tenor publish them) rather
+  // than forcing every GIF into one cropped band.
+  const box = gifPreviewBox(prev['og:image:width'], prev['og:image:height']);
 
   // A GIF card exists to show a moving GIF, so request the original rather than
   // a thumbnail — the thumbnail endpoint would return a frozen first frame.
@@ -2284,7 +2293,15 @@ function GifCard({
   const thumbSrc = mxcImage
     ? shouldServeGifOriginal(url, prev)
       ? mxcUrlToHttp(mx, mxcImage, useAuthentication)
-      : mxcUrlToHttp(mx, mxcImage, useAuthentication, 400, 200, 'scale', false)
+      : mxcUrlToHttp(
+          mx,
+          mxcImage,
+          useAuthentication,
+          GIF_PREVIEW_MAX_WIDTH * 2,
+          GIF_PREVIEW_MAX_HEIGHT * 2,
+          'scale',
+          false,
+        )
     : null;
 
   // If there's no image, fall back to a generic-style layout
@@ -2316,7 +2333,9 @@ function GifCard({
 
   return (
     <Box direction="Column" style={{ width: '100%' }}>
-      {/* GIF thumbnail — full width */}
+      {/* The whole GIF at its own aspect ratio, centred; never cropped. With a
+          known size the box is reserved before it loads (no layout jump);
+          without one it shows at its natural size, capped by the card. */}
       <a
         href={url}
         target="_blank"
@@ -2324,8 +2343,22 @@ function GifCard({
         className={previewCss.GifThumbnailWrapper}
         aria-label={`View GIF on ${siteBadgeLabel}: ${title}`}
       >
-        <img className={previewCss.GifThumbnailImg} src={thumbSrc} alt={title} loading="lazy" />
-        <span className={previewCss.GifBadge}>GIF</span>
+        <span className={previewCss.GifFrame}>
+          <img
+            className={previewCss.GifThumbnailImg}
+            src={thumbSrc}
+            alt={title}
+            loading="lazy"
+            width={box?.width}
+            height={box?.height}
+            style={
+              box
+                ? { width: toRem(box.width), aspectRatio: `${box.width} / ${box.height}` }
+                : undefined
+            }
+          />
+          <span className={previewCss.GifBadge}>GIF</span>
+        </span>
       </a>
       {/* Footer row */}
       <UrlPreviewContent>

src/app/utils/gifPreviewSize.test.ts

@@ -0,0 +1,36 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { gifPreviewBox } from './gifPreviewSize';
+
+test('gifPreviewBox: a landscape GIF wider than the card fills its width', () => {
+  assert.deepEqual(gifPreviewBox(480, 270), { width: 400, height: 225 });
+  assert.deepEqual(gifPreviewBox(480, 200), { width: 400, height: 167 });
+});
+
+test('gifPreviewBox: square and portrait GIFs keep their shape instead of being cropped', () => {
+  assert.deepEqual(gifPreviewBox(300, 300), { width: 320, height: 320 });
+  assert.deepEqual(gifPreviewBox(480, 480), { width: 320, height: 320 });
+  assert.deepEqual(gifPreviewBox(240, 480), { width: 160, height: 320 });
+});
+
+test('gifPreviewBox: a small GIF is enlarged at most 2×', () => {
+  assert.deepEqual(gifPreviewBox(100, 80), { width: 200, height: 160 });
+  assert.deepEqual(gifPreviewBox(150, 150), { width: 300, height: 300 });
+});
+
+test('gifPreviewBox: extreme aspect ratios stay inside the box and never collapse to 0', () => {
+  assert.deepEqual(gifPreviewBox(2000, 50), { width: 400, height: 10 });
+  assert.deepEqual(gifPreviewBox(1, 10000), { width: 1, height: 320 });
+});
+
+test('gifPreviewBox: accepts numeric strings and rejects unknown sizes', () => {
+  assert.deepEqual(gifPreviewBox('480', '270'), { width: 400, height: 225 });
+  assert.equal(gifPreviewBox(undefined, 270), undefined);
+  assert.equal(gifPreviewBox(480, 0), undefined);
+  assert.equal(gifPreviewBox('wide', 270), undefined);
+  assert.equal(gifPreviewBox(Number.NaN, 270), undefined);
+});
+
+test('gifPreviewBox: custom limits', () => {
+  assert.deepEqual(gifPreviewBox(480, 270, 200, 200, 1), { width: 200, height: 113 });
+});

src/app/utils/gifPreviewSize.ts

@@ -0,0 +1,39 @@
+/**
+ * Display size for a Giphy / Tenor link-preview GIF. The card used to force
+ * every GIF into a full-width × 200px band with `object-fit: cover`, so square
+ * and portrait GIFs lost most of their height and small ones were blown up.
+ * Fit the GIF inside `maxWidth × maxHeight` keeping its aspect ratio, and
+ * enlarge a small GIF at most `maxUpscale`× so it stays sharp.
+ */
+
+/** The GIF card's width (UrlPreview is 25rem); a phone shrinks it further via CSS. */
+export const GIF_PREVIEW_MAX_WIDTH = 400;
+export const GIF_PREVIEW_MAX_HEIGHT = 320;
+export const GIF_PREVIEW_MAX_UPSCALE = 2;
+
+export type GifPreviewBox = { width: number; height: number };
+
+// og:image:width / og:image:height are numbers from Synapse, but some sites
+// publish them as strings; anything else (missing, 0, NaN) means "unknown".
+const dimension = (value: unknown): number | undefined => {
+  const n = typeof value === 'string' ? Number(value) : value;
+  return typeof n === 'number' && Number.isFinite(n) && n > 0 ? n : undefined;
+};
+
+/** The box to render the GIF in, or `undefined` when its size isn't known. */
+export const gifPreviewBox = (
+  rawWidth: unknown,
+  rawHeight: unknown,
+  maxWidth = GIF_PREVIEW_MAX_WIDTH,
+  maxHeight = GIF_PREVIEW_MAX_HEIGHT,
+  maxUpscale = GIF_PREVIEW_MAX_UPSCALE,
+): GifPreviewBox | undefined => {
+  const width = dimension(rawWidth);
+  const height = dimension(rawHeight);
+  if (!width || !height) return undefined;
+  const scale = Math.min(maxWidth / width, maxHeight / height, maxUpscale);
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale)),
+  };
+};