@jant/core 0.6.2 → 0.6.3

package/src/__tests__/export-service.test.ts

@@ -800,4 +800,131 @@ describe("createExportService (Hugo)", () => {
     const files = filesToMap(await service.generateHugoFiles());
     expect(files.has("static/media/med-x.webp")).toBe(false);
   });
+
+  it("Sync mode (bundleMedia false) links media by absolute site URL without reading bytes", async () => {
+    const root = makePost({ id: "post-root", slug: "with-media" });
+    const media = makeMedia({
+      id: "med-1",
+      filename: "photo.webp",
+      storageKey: "media/med-1.webp",
+    });
+    const storage = {
+      // Must NOT be called — Sync links by URL, never reads attachment bytes.
+      get: async () => {
+        throw new Error("storage.get should not be called in Sync mode");
+      },
+    };
+    const service = createExportService(
+      buildServices({
+        posts: [root],
+        mediaByPost: new Map([["post-root", [media]]]),
+      }),
+      makeSiteConfig(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      { storage: storage as any, bundleMedia: false },
+    );
+    const files = filesToMap(await service.generateHugoFiles());
+    expect(files.has("static/media/med-1.webp")).toBe(false);
+    const { frontMatter } = await parseFrontMatter(
+      files.get("content/with-media/_index.md") as string,
+    );
+    const entry = frontMatter.media![0];
+    expect(entry.src).toBe("https://example.com/media/med-1.webp");
+    expect(entry.storage_key).toBe("media/med-1.webp");
+  });
+
+  it("Sync mode links the video poster by absolute site URL without bundling", async () => {
+    const root = makePost({ id: "post-root", slug: "with-video" });
+    const videoMedia = makeMedia({
+      id: "med-video",
+      filename: "clip.mp4",
+      mimeType: "video/mp4",
+      storageKey: "media/med-video.mp4",
+      mediaKind: "video",
+      posterKey: "media/posters/med-video.webp",
+    });
+    const storage = {
+      get: async () => {
+        throw new Error("storage.get should not be called in Sync mode");
+      },
+    };
+    const service = createExportService(
+      buildServices({
+        posts: [root],
+        mediaByPost: new Map([["post-root", [videoMedia]]]),
+      }),
+      makeSiteConfig(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      { storage: storage as any, bundleMedia: false },
+    );
+    const files = filesToMap(await service.generateHugoFiles());
+    expect(files.has("static/media/med-video.mp4")).toBe(false);
+    expect(files.has("static/media/med-video-poster.webp")).toBe(false);
+    const { frontMatter } = await parseFrontMatter(
+      files.get("content/with-video/_index.md") as string,
+    );
+    const entry = frontMatter.media![0];
+    expect(entry.src).toBe("https://example.com/media/med-video.mp4");
+    expect(entry.poster).toBe(
+      "https://example.com/media/posters/med-video.webp",
+    );
+  });
+
+  it("Sync mode still prefers a dedicated provider public URL when configured", async () => {
+    const root = makePost({ id: "post-root", slug: "with-cdn" });
+    const media = makeMedia({
+      id: "med-cdn",
+      filename: "cdn.webp",
+      storageKey: "media/med-cdn.webp",
+    });
+    const service = createExportService(
+      buildServices({
+        posts: [root],
+        mediaByPost: new Map([["post-root", [media]]]),
+      }),
+      makeSiteConfig({ r2PublicUrl: "https://cdn.example.com" }),
+      { bundleMedia: false },
+    );
+    const files = filesToMap(await service.generateHugoFiles());
+    expect(files.has("static/media/med-cdn.webp")).toBe(false);
+    const { frontMatter } = await parseFrontMatter(
+      files.get("content/with-cdn/_index.md") as string,
+    );
+    expect(frontMatter.media![0].src).toBe(
+      "https://cdn.example.com/media/med-cdn.webp",
+    );
+  });
+
+  it("Sync mode falls back to bundling bytes when the site URL is unknown", async () => {
+    const root = makePost({ id: "post-root", slug: "with-media" });
+    const media = makeMedia({
+      id: "med-1",
+      filename: "photo.webp",
+      storageKey: "media/med-1.webp",
+    });
+    const storage = {
+      get: async (key: string) =>
+        key === "media/med-1.webp"
+          ? { body: new Blob([new Uint8Array([1, 2, 3])]).stream() }
+          : null,
+    };
+    const service = createExportService(
+      buildServices({
+        posts: [root],
+        mediaByPost: new Map([["post-root", [media]]]),
+      }),
+      makeSiteConfig({ siteUrl: "" }),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      { storage: storage as any, bundleMedia: false },
+    );
+    const files = filesToMap(await service.generateHugoFiles());
+    // No resolvable URL — bundling is the only way to avoid a broken link.
+    expect(files.get("static/media/med-1.webp")).toEqual(
+      new Uint8Array([1, 2, 3]),
+    );
+    const { frontMatter } = await parseFrontMatter(
+      files.get("content/with-media/_index.md") as string,
+    );
+    expect(frontMatter.media![0].src).toBe("/media/med-1.webp");
+  });
 });

package/src/client/components/__tests__/jant-collection-directory.test.ts

@@ -24,8 +24,6 @@ import type { JantCollectionsManager } from "../jant-collection-directory.js";
 
 const labels: CollectionManagerLabels = {
   collectionsTitle: "Collections",
-  collectionSingular: "collection",
-  collectionPlural: "collections",
   organize: "Organize",
   done: "Done",
   organizeHint: "Drag to reorder.",
@@ -186,7 +184,6 @@ async function createElementWithManagerRoot(): Promise<JantCollectionsManager> {
   const root = document.createElement("div");
   root.setAttribute("data-collections-manager-root", "");
   root.innerHTML = `
-    <p data-collections-count></p>
     <div data-collections-reorder-actions hidden>
       <button type="button" data-collections-action="divider">New divider</button>
       <button type="button" data-collections-action="done">Done</button>
@@ -208,32 +205,6 @@ async function createElementWithManagerRoot(): Promise<JantCollectionsManager> {
   return el;
 }
 
-async function createEmptyElementWithManagerRoot(): Promise<JantCollectionsManager> {
-  const root = document.createElement("div");
-  root.setAttribute("data-collections-manager-root", "");
-  root.innerHTML = `
-    <p data-collections-count hidden></p>
-    <div data-collections-reorder-actions hidden>
-      <button type="button" data-collections-action="divider">New divider</button>
-      <button type="button" data-collections-action="done">Done</button>
-    </div>
-    <div data-collections-toolbar></div>
-    <p data-collections-hint hidden></p>
-    <div data-collections-more-menu hidden></div>
-    <button type="button" data-collections-action="toggle-menu"></button>
-  `;
-
-  const el = document.createElement(
-    "jant-collections-manager",
-  ) as JantCollectionsManager;
-  el.labels = labels;
-  el.items = [];
-  root.appendChild(el);
-  document.body.appendChild(root);
-  await el.updateComplete;
-  return el;
-}
-
 describe("JantCollectionsManager", () => {
   beforeEach(() => {
     document.body.innerHTML = "";
@@ -308,19 +279,6 @@ describe("JantCollectionsManager", () => {
     expect(toolbar?.hidden).toBe(true);
   });
 
-  it("keeps the collection count visible when the list is empty", async () => {
-    const el = await createEmptyElementWithManagerRoot();
-    const root = el.closest<HTMLElement>("[data-collections-manager-root]");
-
-    expect(root).not.toBeNull();
-    if (!root) throw new Error("Expected collections manager root");
-
-    const count = root.querySelector<HTMLElement>("[data-collections-count]");
-
-    expect(count?.hidden).toBe(false);
-    expect(count?.textContent).toBe("0 collections");
-  });
-
   it("renders divider labels as aggregate links when followed by a grouped section", async () => {
     const el = await createElementWithItems(groupedItems);
 

package/src/client/components/collection-manager-types.ts

@@ -6,8 +6,6 @@ import type { CollectionFormLabels } from "./collection-types.js";
 
 export interface CollectionManagerLabels {
   collectionsTitle: string;
-  collectionSingular: string;
-  collectionPlural: string;
   organize: string;
   done: string;
   organizeHint: string;

package/src/client/components/jant-collection-directory.ts

@@ -245,21 +245,6 @@ export class JantCollectionsManager extends LitElement {
     );
   }
 
-  #collectionCount() {
-    return this._items.filter(
-      (item) => item.type === "collection" && item.collection,
-    ).length;
-  }
-
-  #collectionCountLabel() {
-    const count = this.#collectionCount();
-    return `${count} ${
-      count === 1
-        ? this.labels.collectionSingular
-        : this.labels.collectionPlural
-    }`;
-  }
-
   #countLabel(count: number) {
     return `${count} ${
       count === 1 ? this.labels.entrySingular : this.labels.entryPlural
@@ -280,14 +265,6 @@ export class JantCollectionsManager extends LitElement {
   }
 
   #syncHeaderState() {
-    const countEl = this.#queryHeaderElement<HTMLElement>(
-      "[data-collections-count]",
-    );
-    if (countEl) {
-      countEl.textContent = this.#collectionCountLabel();
-      countEl.hidden = false;
-    }
-
     const doneButton = this.#queryHeaderElement<HTMLButtonElement>(
       '[data-collections-action="done"]',
     );

package/src/i18n/locales/public/en.po

@@ -371,14 +371,8 @@ msgstr "Clear filter"
 msgid "Close menu"
 msgstr "Close menu"
 
-#. @context: Singular collection count label
-#. @context: Singular collection count label
-#. @context: Singular collection count label
 #. @context: Singular collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collection"
 msgstr "collection"
 
@@ -412,14 +406,8 @@ msgstr "Collection order updated."
 msgid "Collection saved."
 msgstr "Collection saved."
 
-#. @context: Plural collection count label
-#. @context: Plural collection count label
-#. @context: Plural collection count label
 #. @context: Plural collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collections"
 msgstr "collections"
 

package/src/i18n/locales/public/zh-Hans.po

@@ -371,14 +371,8 @@ msgstr ""
 msgid "Close menu"
 msgstr ""
 
-#. @context: Singular collection count label
-#. @context: Singular collection count label
-#. @context: Singular collection count label
 #. @context: Singular collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collection"
 msgstr ""
 
@@ -412,14 +406,8 @@ msgstr ""
 msgid "Collection saved."
 msgstr ""
 
-#. @context: Plural collection count label
-#. @context: Plural collection count label
-#. @context: Plural collection count label
 #. @context: Plural collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collections"
 msgstr ""
 

package/src/i18n/locales/public/zh-Hant.po

@@ -371,14 +371,8 @@ msgstr ""
 msgid "Close menu"
 msgstr ""
 
-#. @context: Singular collection count label
-#. @context: Singular collection count label
-#. @context: Singular collection count label
 #. @context: Singular collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collection"
 msgstr ""
 
@@ -412,14 +406,8 @@ msgstr ""
 msgid "Collection saved."
 msgstr ""
 
-#. @context: Plural collection count label
-#. @context: Plural collection count label
-#. @context: Plural collection count label
 #. @context: Plural collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collections"
 msgstr ""
 

package/src/lib/github-sync-site-config.ts

@@ -5,8 +5,10 @@
  * call site had its own near-identical copy.
  *
  * The shape mirrors `routes/api/export.ts` so `jant site export` and
- * `jant github sync` produce byte-identical Hugo sites (modulo media
- * files, which Sync intentionally skips). If you add a field to the
+ * `jant github sync` produce matching Hugo sites. They differ only in
+ * media: `site export` bundles attachment bytes into `static/media/` for
+ * a self-contained archive, while Sync links attachments by URL and
+ * never writes their bytes into the repo. If you add a field to the
  * export route, add it here too.
  */
 

package/src/services/export-theme/styles/main.css

@@ -379,11 +379,12 @@ time {
 }
 
 .site-logo-avatar {
-  width: calc(var(--avatar-size) + 2px);
-  height: calc(var(--avatar-size) + 2px);
+  box-sizing: border-box;
+  width: calc(var(--avatar-size) + 4px);
+  height: calc(var(--avatar-size) + 4px);
   border-radius: var(--avatar-radius);
   object-fit: cover;
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--site-divider) 82%, transparent);
+  border: 1px solid color-mix(in srgb, var(--site-divider) 82%, transparent);
   flex: none;
 }
 

package/src/services/export.ts

@@ -227,7 +227,17 @@ export function createExportService(
     media: MediaService;
   },
   siteConfig: SiteConfig,
-  deps: { storage?: StorageDriver | null } = {},
+  deps: {
+    storage?: StorageDriver | null;
+    /**
+     * Whether to bundle media bytes into the exported site under
+     * `static/media/`. Defaults to `true` (the `jant site export`
+     * archive, which must be self-contained). GitHub Sync passes
+     * `false` so media is linked by URL instead — it never reads or
+     * base64-encodes attachment bytes.
+     */
+    bundleMedia?: boolean;
+  } = {},
 ): ExportService {
   return {
     async generateHugoFiles() {
@@ -308,6 +318,7 @@ export function createExportService(
 
       // 3. Build file list
       const exportFiles: ExportFile[] = [];
+      const bundleMedia = deps.bundleMedia ?? true;
 
       // Generate thread bundles (root _index.md + per-reply index.md).
       for (const root of roots) {
@@ -335,6 +346,7 @@ export function createExportService(
           rawMediaByPost,
           siteConfig,
           deps.storage ?? null,
+          bundleMedia,
         );
         exportFiles.push(...bundleFiles);
       }
@@ -662,14 +674,13 @@ interface MediaEmission {
   entry: JantMedia;
   /**
    * Site-relative path under `static/` where the primary bytes should
-   * land, or null when the media links to a remote public URL and no
-   * bytes need to be emitted.
+   * land, or null when the media is linked by URL and no bytes need to
+   * be emitted.
    */
   inlinePath: string | null;
   /**
    * Site-relative path under `static/` where the poster bytes should
-   * land, or null when there's no poster or the poster is linked via
-   * a public URL.
+   * land, or null when there's no poster or the poster is linked by URL.
    */
   inlinePosterPath: string | null;
 }
@@ -682,26 +693,42 @@ interface MediaEmission {
  * When the media's provider has a reachable public URL (R2/S3/local
  * proxy configured with a `*_public_url`), `src` points at that absolute
  * URL and no bytes are emitted — the exported site stays small and the
- * media keeps being served from wherever it already lives. Without a
- * public URL the bytes are written to `static/media/{id}.ext` and `src`
- * is the site-relative path.
+ * media keeps being served from wherever it already lives.
+ *
+ * Otherwise behavior depends on `bundleMedia`:
+ * - `true` (the `jant site export` archive): bytes are written to
+ *   `static/media/{id}.ext` and `src` is the site-relative path, so the
+ *   archive is self-contained.
+ * - `false` (GitHub Sync): no bytes are emitted. `src` falls back to the
+ *   site's own URL so it stays an absolute, resolvable link — the worker
+ *   already serves these objects at `/{storageKey}`. This keeps Sync
+ *   from reading and base64-encoding every attachment on every push.
+ *
+ * When `bundleMedia` is false but the site URL is unknown, bundling is
+ * used as a last resort to avoid emitting a broken relative link.
  */
 function buildMediaEmission(
   media: Media,
   siteConfig: SiteConfig,
+  bundleMedia: boolean,
 ): MediaEmission {
-  const publicUrl = getPublicUrlForProvider(
+  const dedicatedPublicUrl = getPublicUrlForProvider(
     media.provider,
     siteConfig.r2PublicUrl,
     siteConfig.s3PublicUrl,
     siteConfig.localPublicUrl,
   );
-  const hasPublic = Boolean(publicUrl);
+  const siteFallbackUrl =
+    !bundleMedia && siteConfig.siteUrl.trim() ? siteConfig.siteUrl : undefined;
+  const mediaBaseUrl = dedicatedPublicUrl || siteFallbackUrl;
+  const hasRemoteUrl = Boolean(mediaBaseUrl);
 
   const ext = extOfFilename(media.filename);
   const localName = `${media.id}${ext}`;
   const localPath = `/media/${localName}`;
-  const src = hasPublic ? getMediaUrl(media.storageKey, publicUrl) : localPath;
+  const src = hasRemoteUrl
+    ? getMediaUrl(media.storageKey, mediaBaseUrl)
+    : localPath;
 
   const entry: JantMedia = {
     id: media.id,
@@ -730,18 +757,18 @@ function buildMediaEmission(
   if (media.posterKey) {
     const posterExt = extOfStorageKey(media.posterKey);
     const posterLocalName = `${media.id}-poster.${posterExt}`;
-    entry.poster = hasPublic
-      ? getMediaUrl(media.posterKey, publicUrl)
+    entry.poster = hasRemoteUrl
+      ? getMediaUrl(media.posterKey, mediaBaseUrl)
       : `/media/${posterLocalName}`;
     entry.poster_key = media.posterKey;
-    if (!hasPublic) {
+    if (!hasRemoteUrl) {
       inlinePosterPath = `static/media/${posterLocalName}`;
     }
   }
 
   return {
     entry,
-    inlinePath: hasPublic ? null : `static/media/${localName}`,
+    inlinePath: hasRemoteUrl ? null : `static/media/${localName}`,
     inlinePosterPath,
   };
 }
@@ -793,6 +820,7 @@ async function buildThreadBundle(
   mediaByPost: Map<string, Media[]>,
   siteConfig: SiteConfig,
   storage: StorageDriver | null,
+  bundleMedia: boolean,
 ): Promise<ExportFile[]> {
   const files: ExportFile[] = [];
 
@@ -807,7 +835,9 @@ async function buildThreadBundle(
 
   // Root front matter.
   const rootMedia = mediaByPost.get(root.id) ?? [];
-  const rootEmissions = rootMedia.map((m) => buildMediaEmission(m, siteConfig));
+  const rootEmissions = rootMedia.map((m) =>
+    buildMediaEmission(m, siteConfig, bundleMedia),
+  );
   const rootMediaList = rootEmissions.map((e) => e.entry);
   const rootFrontMatter: HugoFrontMatter = {
     id: root.id,
@@ -894,7 +924,7 @@ async function buildThreadBundle(
     const replySlug = slugMap.get(reply.id) ?? reply.slug;
     const replyMedia = mediaByPost.get(reply.id) ?? [];
     const replyEmissions = replyMedia.map((m) =>
-      buildMediaEmission(m, siteConfig),
+      buildMediaEmission(m, siteConfig, bundleMedia),
     );
     const replyMediaList = replyEmissions.map((e) => e.entry);
     const replyCollectionEntries = buildExportedCollectionEntriesForPost(

package/src/services/github-sync.ts

@@ -451,8 +451,14 @@ export function createGitHubSyncService(
       if (!config) throw new Error("GitHub Sync is not configured");
       const { client, owner, repo } = createClient(config);
 
-      // Generate full Hugo site via the shared export service
-      const exportService = createExportService(services, siteConfig, deps);
+      // Generate full Hugo site via the shared export service.
+      // `bundleMedia: false` — Sync links attachments by URL instead of
+      // writing their bytes into the repo, so a push never reads or
+      // base64-encodes media. Media stays served from the live site.
+      const exportService = createExportService(services, siteConfig, {
+        storage: deps.storage,
+        bundleMedia: false,
+      });
       const exportFiles = await exportService.generateHugoFiles();
 
       // Resolve HEAD before building the tree — needed as the commit

package/src/styles/ui.css

@@ -611,12 +611,12 @@
   }
 
   .site-logo-avatar {
-    width: calc(var(--avatar-size) + 2px);
-    height: calc(var(--avatar-size) + 2px);
+    box-sizing: border-box;
+    width: calc(var(--avatar-size) + 4px);
+    height: calc(var(--avatar-size) + 4px);
     border-radius: var(--avatar-radius);
     object-fit: cover;
-    box-shadow: 0 0 0 1px
-      color-mix(in srgb, var(--site-divider) 82%, transparent);
+    border: 1px solid color-mix(in srgb, var(--site-divider) 82%, transparent);
   }
 
   .jant-brand-mark {
@@ -1115,6 +1115,10 @@
     flex: 1 1 18rem;
   }
 
+  .collections-page-heading .page-intro-title-row {
+    align-items: center;
+  }
+
   .collections-page-actions {
     display: flex;
     align-items: center;
@@ -1129,7 +1133,7 @@
   }
 
   .collections-page-action-group[data-collections-toolbar] {
-    gap: 0.2rem;
+    gap: 0.25rem;
   }
 
   .collections-page-toolbar-button {
@@ -1137,13 +1141,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    width: 2.25rem;
+    height: 2.25rem;
     padding: 0;
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: var(--foreground);
+    color: var(--site-text-secondary);
     cursor: pointer;
     transition:
       background-color 0.16s ease,
@@ -1152,41 +1156,15 @@
       border-color 0.16s ease;
   }
 
-  .collections-page-toolbar-button:hover {
-    background: color-mix(in srgb, var(--accent) 42%, transparent);
-  }
-
-  .collections-page-toolbar-button:focus-visible {
-    outline: none;
-    background: color-mix(in srgb, var(--accent) 46%, transparent);
-    box-shadow: 0 0 0 3px
-      color-mix(in srgb, var(--site-accent) 12%, transparent);
-  }
-
-  .collections-page-more-btn {
-    min-width: 2.1rem;
-    width: 2.1rem;
-    height: 2.1rem;
-    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
-    background: color-mix(
-      in srgb,
-      var(--background) 90%,
-      var(--site-page-bg) 10%
-    );
-    color: var(--site-text-secondary);
-    box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.26);
-  }
-
-  .collections-page-more-btn:hover,
-  .collections-page-more-btn[aria-expanded="true"] {
-    border-color: color-mix(in srgb, var(--site-accent) 18%, var(--border));
-    background: color-mix(in srgb, var(--accent) 34%, var(--background));
+  .collections-page-toolbar-button:hover,
+  .collections-page-toolbar-button[aria-expanded="true"] {
+    background: var(--accent);
     color: var(--foreground);
   }
 
-  .collections-page-more-btn:focus-visible {
+  .collections-page-toolbar-button:focus-visible {
     outline: none;
-    border-color: color-mix(in srgb, var(--site-accent) 26%, var(--border));
+    background: var(--accent);
     box-shadow: 0 0 0 3px
       color-mix(in srgb, var(--site-accent) 12%, transparent);
   }
@@ -1377,7 +1355,6 @@
     line-height: var(--collection-directory-title-line-height);
     letter-spacing: -0.02em;
     text-wrap: pretty;
-    user-select: all;
   }
 
   .collection-directory-title-marker {
@@ -2210,7 +2187,6 @@
 
   .feed-link-title-link {
     text-decoration: none;
-    user-select: all;
   }
 
   .feed-link-title-link:hover {
@@ -2228,10 +2204,6 @@
     text-wrap: pretty;
   }
 
-  .feed-note-title a {
-    user-select: all;
-  }
-
   .feed-continue-link {
     display: inline-block;
     margin-top: 0.5rem;
@@ -7002,10 +6974,15 @@
     opacity: 0.82;
   }
 
-  /* Single image: constrain to container width */
+  /* Single image: constrain to container width. min-width keeps the preview
+     wide enough for the remove button; a very long image overflows it and is
+     cropped from the top (object-fit: cover) instead of shrinking to a sliver. */
   .compose-attachment:only-child .compose-attachment-img {
     max-width: 100%;
     max-height: min(200px, 22dvh);
+    min-width: 48px;
+    object-fit: cover;
+    object-position: center top;
   }
 
   .compose-attachment:only-child .compose-attachment-preview-fallback {