diff --git a/.changelog/NEXT.md b/.changelog/NEXT.md
index e17887055a..30627af5fd 100644
--- a/.changelog/NEXT.md
+++ b/.changelog/NEXT.md
@@ -38,6 +38,8 @@
 
 - **Branch reconciler prioritizes recognized work branches.** The in-flight set handed to the coordinator agent is now ordered by branch prefix — `claim/`, `cos/`, `next/`, `feature/`, `fix/`, and other conventional prefixes are reconciled ahead of unrecognized/ad-hoc branches — so a bounded run spends its budget on real deliverables first. Both `/` and `-` separators match.
 
+- **The Catalog page is usable on a phone.** The toolbar used to run off the side of the screen and the filter dropdowns each claimed a fixed width they didn't have room for. Now the view toggle spans the width as a segmented Grid/Albums control with the three actions split evenly beneath it, search sits directly under the header so it's reachable without scrolling, the type chips stay on one swipeable row instead of stacking three rows deep, and the Universe/Series/Tag dropdowns lay out two-up. The selection bar stacks its count above three equal-width buttons, and its "Remix into…" / "Add to universe/series…" menus now span the bar instead of opening off-screen. Delete and select targets on each card are bigger, and long album subtitles drop below the title rather than squeezing it. Confirming a card delete now shows a band across the top of the card naming the ingredient — `Delete "Echo Saint"?` — instead of an unlabeled prompt tucked in the corner, which on a phone left barely enough room for the name beside it. That one is visible at every width; the rest of the layout is unchanged on a desktop-width window.
+
 ## AI providers
 
 - **[issue-3194] Ask and image captioning now work on a local OpenCode provider.** If you pointed Ask Yourself or vision captioning at an OpenCode provider backed by Ollama, the run failed with the model reported as "not valid" — OpenCode has to be told which local models exist before it will accept one, and only the agent and Run Prompt paths were doing that. Every path that starts a coding CLI now declares them the same way, so the model you picked is accepted wherever you use it.
diff --git a/client/src/components/catalog/CatalogAlbum.jsx b/client/src/components/catalog/CatalogAlbum.jsx
index 13bf9a5bbb..04f6c5d13f 100644
--- a/client/src/components/catalog/CatalogAlbum.jsx
+++ b/client/src/components/catalog/CatalogAlbum.jsx
@@ -75,6 +75,7 @@ export default function CatalogAlbum({
   }, [expanded, ensureLoaded]);
 
   const toggle = () => setExpanded((e) => !e);
+  const Chevron = expanded ? ChevronDown : ChevronRight;
 
   const loadMore = async () => {
     setLoadingMore(true);
@@ -102,21 +103,26 @@ export default function CatalogAlbum({
 
   return (
     <section className="border border-port-border rounded-lg overflow-hidden bg-port-card/40">
+      {/* On a phone the subtitle drops to its own line under the title rather
+          than competing with it for a ~200px slot; the chevron and count stay
+          pinned so the row reads the same at every width. */}
       <button
         type="button"
         onClick={toggle}
         aria-expanded={expanded}
-        className="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-port-bg/40"
+        className="w-full flex items-start sm:items-center gap-2 px-3 sm:px-4 py-3 text-left hover:bg-port-bg/40"
       >
-        {expanded ? <ChevronDown size={16} className="text-gray-400" /> : <ChevronRight size={16} className="text-gray-400" />}
-        <span className="text-white font-medium">{title}</span>
-        {subtitle ? <span className="text-xs text-gray-500">{subtitle}</span> : null}
-        <span className="ml-auto text-xs text-gray-400 px-2 py-0.5 rounded-full border border-port-border">
+        <Chevron size={16} className="shrink-0 mt-0.5 sm:mt-0 text-gray-400" />
+        <span className="min-w-0 flex-1 flex flex-col sm:flex-row sm:items-center sm:gap-2">
+          <span className="text-white font-medium truncate">{title}</span>
+          {subtitle ? <span className="text-xs text-gray-500 sm:truncate">{subtitle}</span> : null}
+        </span>
+        <span className="shrink-0 text-xs text-gray-400 px-2 py-0.5 rounded-full border border-port-border">
           {count}
         </span>
       </button>
       {expanded && (
-        <div className="px-4 pb-4">
+        <div className="px-3 sm:px-4 pb-3 sm:pb-4">
           {loading ? (
             <div className="flex items-center gap-2 text-sm text-gray-500 py-3">
               <Loader2 size={14} className="animate-spin" /> Loading…
diff --git a/client/src/components/catalog/CatalogCard.jsx b/client/src/components/catalog/CatalogCard.jsx
index feefb12604..aaa8932944 100644
--- a/client/src/components/catalog/CatalogCard.jsx
+++ b/client/src/components/catalog/CatalogCard.jsx
@@ -11,6 +11,7 @@
 import { Link } from 'react-router-dom';
 import { Sparkles, Trash2 } from 'lucide-react';
 import MediaImage from '../MediaImage';
+import InlineConfirmRow from '../ui/InlineConfirmRow';
 import { payloadSnippet } from '../../lib/catalogTypes';
 
 function TypeBadge({ type, getType }) {
@@ -60,7 +61,7 @@ export default function CatalogCard({
   const snippet = payloadSnippet(it.payload, it.type, 120, getType);
   return (
     <li
-      className={`relative bg-port-card border rounded-lg transition-colors ${
+      className={`relative bg-port-card border rounded-lg overflow-hidden transition-colors ${
         selected
           ? 'border-port-accent ring-1 ring-port-accent'
           : 'border-port-border hover:border-port-accent/60'
@@ -73,12 +74,30 @@ export default function CatalogCard({
           onChange={() => onToggleSelect(it)}
           onClick={(e) => e.stopPropagation()}
           aria-label={`Select ${name}`}
-          className="w-4 h-4 m-1 accent-port-accent cursor-pointer"
+          className="w-4 h-4 m-1.5 accent-port-accent cursor-pointer"
         />
       </span>
+      {/* Armed delete: a full-width band above the card body (the house
+          inline-confirm pattern) rather than a corner overlay. A corner overlay
+          has to be paid for with reserved padding on the link, and on a
+          single-column phone card there isn't enough width to reserve without
+          crushing the name — the version that stretched the overlay instead
+          covered the name, hiding the very thing being deleted. The band names
+          it. `pl-11` clears the absolutely-positioned checkbox. */}
+      {armed && (
+        <InlineConfirmRow
+          variant="separator"
+          className="pl-11"
+          question={`Delete "${name}"?`}
+          confirmText="Yes"
+          cancelText="No"
+          onConfirm={() => onConfirmDelete(it)}
+          onCancel={onCancelArm}
+        />
+      )}
       <Link
         to={`/catalog/${encodeURIComponent(it.type)}/${encodeURIComponent(it.id)}`}
-        className={`flex gap-3 p-3 pl-10 min-h-[88px] ${armed ? 'pr-32' : 'pr-10'}`}
+        className="flex gap-3 p-3 pl-11 pr-11 min-h-[88px]"
       >
         <CardThumb mediaKey={it.thumbnailKey} alt={name} />
         <span className="flex flex-col gap-2 min-w-0 flex-1">
@@ -96,39 +115,20 @@ export default function CatalogCard({
           ) : null}
         </span>
       </Link>
-      <div className="absolute top-2 right-2">
-        {/* The delete control is a sibling of the <Link>, not a descendant, so a
-            click on these buttons never traverses the anchor. */}
-        {armed ? (
-          <span className="inline-flex items-center gap-1 text-xs bg-port-card border border-port-border rounded px-1 py-0.5 shadow-sm">
-            <span className="text-gray-400 pl-1">Delete?</span>
-            <button
-              type="button"
-              onClick={() => onConfirmDelete(it)}
-              className="px-2 py-0.5 rounded bg-port-error/20 text-port-error hover:bg-port-error/30 font-medium"
-            >
-              Yes
-            </button>
-            <button
-              type="button"
-              onClick={onCancelArm}
-              className="px-2 py-0.5 rounded text-gray-400 hover:text-white"
-            >
-              No
-            </button>
-          </span>
-        ) : (
-          <button
-            type="button"
-            onClick={() => onArm(it.id)}
-            className="p-1.5 rounded text-gray-500 hover:text-port-error bg-port-card"
-            aria-label={`Delete ${name}`}
-            title="Delete ingredient"
-          >
-            <Trash2 size={14} />
-          </button>
-        )}
-      </div>
+      {/* The arm button is a sibling of the <Link>, not a descendant, so its
+          click never traverses the anchor. It gives way to the confirm band
+          above once armed, so the card never shows two delete affordances. */}
+      {!armed && (
+        <button
+          type="button"
+          onClick={() => onArm(it.id)}
+          className="absolute top-2 right-2 p-2 rounded text-gray-500 hover:text-port-error bg-port-card"
+          aria-label={`Delete ${name}`}
+          title="Delete ingredient"
+        >
+          <Trash2 size={16} />
+        </button>
+      )}
     </li>
   );
 }
diff --git a/client/src/pages/Catalog.jsx b/client/src/pages/Catalog.jsx
index de16e55620..0c296c074e 100644
--- a/client/src/pages/Catalog.jsx
+++ b/client/src/pages/Catalog.jsx
@@ -517,69 +517,98 @@ export default function Catalog() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
-        <div className="flex items-center gap-3">
-          <Sparkles className="w-6 h-6 text-port-accent" aria-hidden="true" />
-          <h1 className="text-2xl font-bold text-white">Catalog</h1>
-          <span className="text-sm text-gray-500">
+      {/* Header. The toolbar wraps to its own rows on a phone because the four
+          controls together need ~350px and a 320px viewport gives 288px.
+          A label too long to survive that (Sync's, at `lg`; the action bar's, at
+          `sm`) hides its tail and keeps the full wording in aria-label, so the
+          accessible name never depends on viewport width — the visible text is
+          always a prefix of it, per WCAG 2.5.3 label-in-name. The reveal
+          breakpoint differs per button; only the prefix relationship is
+          invariant (asserted in Catalog.test.jsx). */}
+      <div className="flex items-center justify-between mb-4 sm:mb-6 flex-wrap gap-3">
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+          <Sparkles className="w-6 h-6 shrink-0 text-port-accent" aria-hidden="true" />
+          <h1 className="text-xl sm:text-2xl font-bold text-white">Catalog</h1>
+          <span className="text-sm text-gray-500 whitespace-nowrap">
             {totalCount} ingredient{totalCount === 1 ? '' : 's'}
           </span>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
           {/* View toggle (Grid ↔ Albums), persisted in the URL. */}
-          <div className="inline-flex rounded-lg border border-port-border overflow-hidden" role="group" aria-label="Catalog view">
+          <div className="inline-flex w-full sm:w-auto rounded-lg border border-port-border overflow-hidden" role="group" aria-label="Catalog view">
             <button
               type="button"
               onClick={() => updateParams({ view: '' })}
               aria-pressed={view === 'grid'}
-              className={`inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium ${view === 'grid' ? 'bg-port-accent text-white' : 'bg-port-card text-gray-300 hover:text-white'}`}
+              className={`inline-flex flex-1 sm:flex-none items-center justify-center gap-1.5 px-3 py-2 min-h-[40px] text-sm font-medium ${view === 'grid' ? 'bg-port-accent text-white' : 'bg-port-card text-gray-300 hover:text-white'}`}
             >
-              <LayoutGrid size={16} aria-hidden="true" /> Grid
+              <LayoutGrid size={16} className="shrink-0" aria-hidden="true" /> Grid
             </button>
             <button
               type="button"
               onClick={() => updateParams({ view: 'albums' })}
               aria-pressed={view === 'albums'}
-              className={`inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium ${view === 'albums' ? 'bg-port-accent text-white' : 'bg-port-card text-gray-300 hover:text-white'}`}
+              className={`inline-flex flex-1 sm:flex-none items-center justify-center gap-1.5 px-3 py-2 min-h-[40px] text-sm font-medium ${view === 'albums' ? 'bg-port-accent text-white' : 'bg-port-card text-gray-300 hover:text-white'}`}
             >
-              <Library size={16} aria-hidden="true" /> Albums
+              <Library size={16} className="shrink-0" aria-hidden="true" /> Albums
             </button>
           </div>
           <button
             type="button"
             onClick={handleSync}
             disabled={syncing}
+            aria-label="Sync from Universes"
             title="Pull canon characters, places, and objects from your universes into the catalog"
-            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-port-border bg-port-card hover:bg-port-bg text-white text-sm font-medium disabled:opacity-50"
+            className="inline-flex flex-1 sm:flex-none items-center justify-center gap-2 px-3 py-2 min-h-[40px] rounded-lg border border-port-border bg-port-card hover:bg-port-bg text-white text-sm font-medium disabled:opacity-50"
           >
             {syncing
-              ? <Loader2 size={16} className="animate-spin" aria-hidden="true" />
-              : <RefreshCw size={16} aria-hidden="true" />}
-            {syncing ? 'Syncing…' : 'Sync from Universes'}
+              ? <Loader2 size={16} className="animate-spin shrink-0" aria-hidden="true" />
+              : <RefreshCw size={16} className="shrink-0" aria-hidden="true" />}
+            <span className="truncate">
+              {syncing ? 'Syncing…' : <>Sync<span className="hidden lg:inline"> from Universes</span></>}
+            </span>
           </button>
           <Link
             to="/catalog/ingest"
-            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-port-border bg-port-card hover:bg-port-bg text-white text-sm font-medium"
+            className="inline-flex flex-1 sm:flex-none items-center justify-center gap-2 px-3 py-2 min-h-[40px] rounded-lg border border-port-border bg-port-card hover:bg-port-bg text-white text-sm font-medium"
           >
-            <FileInput size={16} aria-hidden="true" />
+            <FileInput size={16} className="shrink-0" aria-hidden="true" />
             Ingest
           </Link>
           <button
             type="button"
             onClick={() => (showForm ? closeForm() : setShowForm(true))}
-            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-port-accent hover:bg-port-accent/90 text-white text-sm font-medium"
+            className="inline-flex flex-1 sm:flex-none items-center justify-center gap-2 px-3 py-2 min-h-[40px] rounded-lg bg-port-accent hover:bg-port-accent/90 text-white text-sm font-medium"
           >
-            <Plus size={16} aria-hidden="true" />
+            <Plus size={16} className="shrink-0" aria-hidden="true" />
             New
           </button>
         </div>
       </div>
 
-      <div className="flex flex-wrap items-center gap-2 mb-4">
+      {/* Search sits directly under the header so the primary way to find an
+          ingredient stays above the fold on a phone, ahead of the filters. */}
+      <div className="relative mb-4">
+        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" aria-hidden="true" />
+        <label htmlFor="catalog-search" className="sr-only">Search catalog</label>
+        <input
+          id="catalog-search"
+          type="search"
+          value={searchInput}
+          onChange={(e) => setSearchInput(e.target.value)}
+          placeholder="Search by name, tag, or text…"
+          className="w-full pl-9 pr-3 py-2 bg-port-card border border-port-border rounded-lg text-white text-sm focus:outline-none focus:border-port-accent"
+        />
+      </div>
+
+      {/* Type chips. Under `sm` they stay on one swipeable row (bleeding to the
+          screen edge) instead of wrapping into 3-4 stacked rows that push the
+          cards below the fold; from `sm` up they wrap as before. */}
+      <div className="flex items-center gap-2 mb-4 -mx-4 px-4 overflow-x-auto scrollbar-hide touch-pan-x sm:mx-0 sm:px-0 sm:flex-wrap">
         <button
           type="button"
           onClick={() => updateParams({ type: '' })}
-          className={`text-xs px-3 py-1.5 rounded-full border ${
+          className={`shrink-0 whitespace-nowrap text-xs px-3 py-2 sm:py-1.5 rounded-full border ${
             selectedType === ''
               ? 'bg-port-accent border-port-accent text-white'
               : 'border-port-border text-gray-300 hover:text-white'
@@ -592,7 +621,7 @@ export default function Catalog() {
             key={t.id}
             type="button"
             onClick={() => updateParams({ type: selectedType === t.id ? '' : t.id })}
-            className={`text-xs px-3 py-1.5 rounded-full border ${
+            className={`shrink-0 whitespace-nowrap text-xs px-3 py-2 sm:py-1.5 rounded-full border ${
               selectedType === t.id
                 ? 'bg-port-accent border-port-accent text-white'
                 : 'border-port-border text-gray-300 hover:text-white'
@@ -603,16 +632,18 @@ export default function Catalog() {
         ))}
       </div>
 
-      {/* Universe / Series / Tag dropdowns + Clear filters. */}
-      <div className="flex flex-wrap items-end gap-3 mb-4">
-        <div>
+      {/* Universe / Series / Tag dropdowns + Clear filters. Two columns on a
+          phone (a fixed min-width would overflow a 320px viewport), free-flowing
+          from `sm` up. */}
+      <div className="grid grid-cols-2 gap-3 mb-6 sm:flex sm:flex-wrap sm:items-end">
+        <div className="min-w-0">
           <label htmlFor="catalog-filter-universe" className="block text-[10px] uppercase tracking-wider text-gray-500 mb-1">Universe</label>
           <select
             id="catalog-filter-universe"
             value={selectedUniverse}
             // Changing universe clears a now-out-of-scope series selection.
             onChange={(e) => updateParams({ universe: e.target.value, series: '' })}
-            className="px-3 py-2 bg-port-card border border-port-border rounded text-white text-sm min-w-[160px]"
+            className="w-full sm:w-auto px-3 py-2 bg-port-card border border-port-border rounded text-white text-sm sm:min-w-[160px]"
           >
             <option value="">All universes</option>
             {(facets?.universes || []).map((u) => (
@@ -620,13 +651,13 @@ export default function Catalog() {
             ))}
           </select>
         </div>
-        <div>
+        <div className="min-w-0">
           <label htmlFor="catalog-filter-series" className="block text-[10px] uppercase tracking-wider text-gray-500 mb-1">Series</label>
           <select
             id="catalog-filter-series"
             value={selectedSeries}
             onChange={(e) => updateParams({ series: e.target.value })}
-            className="px-3 py-2 bg-port-card border border-port-border rounded text-white text-sm min-w-[160px]"
+            className="w-full sm:w-auto px-3 py-2 bg-port-card border border-port-border rounded text-white text-sm sm:min-w-[160px]"
           >
             <option value="">All series</option>
             {seriesOptions.map((s) => (
@@ -634,13 +665,13 @@ export default function Catalog() {
             ))}
           </select>
         </div>
-        <div>
+        <div className="min-w-0">
           <label htmlFor="catalog-filter-tag" className="block text-[10px] uppercase tracking-wider text-gray-500 mb-1">Tag</label>
           <select
             id="catalog-filter-tag"
             value={selectedTag}
             onChange={(e) => updateParams({ tag: e.target.value })}
-            className="px-3 py-2 bg-port-card border border-port-border rounded text-white text-sm min-w-[140px]"
+            className="w-full sm:w-auto px-3 py-2 bg-port-card border border-port-border rounded text-white text-sm sm:min-w-[140px]"
           >
             <option value="">All tags</option>
             {(facets?.tags || []).map((t) => (
@@ -652,26 +683,13 @@ export default function Catalog() {
           <button
             type="button"
             onClick={clearFilters}
-            className="inline-flex items-center gap-1 px-3 py-2 rounded-lg border border-port-border text-gray-300 hover:text-white text-sm"
+            className="inline-flex items-center justify-center self-end gap-1 px-3 py-2 min-h-[40px] rounded-lg border border-port-border text-gray-300 hover:text-white text-sm"
           >
-            <X size={14} aria-hidden="true" /> Clear filters
+            <X size={14} className="shrink-0" aria-hidden="true" /> Clear filters
           </button>
         )}
       </div>
 
-      <div className="relative mb-6">
-        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" aria-hidden="true" />
-        <label htmlFor="catalog-search" className="sr-only">Search catalog</label>
-        <input
-          id="catalog-search"
-          type="search"
-          value={searchInput}
-          onChange={(e) => setSearchInput(e.target.value)}
-          placeholder="Search by name, tag, or text…"
-          className="w-full pl-9 pr-3 py-2 bg-port-card border border-port-border rounded-lg text-white text-sm focus:outline-none focus:border-port-accent"
-        />
-      </div>
-
       {showForm && (
         <form onSubmit={handleCreate} className="mb-6 p-4 bg-port-card border border-port-border rounded-lg space-y-3">
           <div className="grid grid-cols-1 sm:grid-cols-[180px_1fr] gap-3">
@@ -724,14 +742,14 @@ export default function Catalog() {
             <button
               type="button"
               onClick={closeForm}
-              className="px-3 py-2 rounded-lg text-gray-400 hover:text-white text-sm"
+              className="px-3 py-2 min-h-[40px] rounded-lg text-gray-400 hover:text-white text-sm"
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={creating || !form.name.trim()}
-              className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-port-accent text-white text-sm font-medium disabled:opacity-50"
+              className="inline-flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] rounded-lg bg-port-accent text-white text-sm font-medium disabled:opacity-50"
             >
               {creating ? <Loader2 size={14} className="animate-spin" /> : null}
               Create
@@ -799,27 +817,40 @@ export default function Catalog() {
         </>
       )}
 
+      {/* Selection action bar. Stacks on a phone: count line, then three
+          equal-width actions whose labels shorten under `sm` (see the header
+          comment for the aria-label contract). `sm:backdrop-blur` — the fill is
+          already 95% opaque, so on a phone the blur buys nothing visible while
+          making the compositor re-sample the area behind the bar on every scroll
+          frame over a 60-card grid. */}
       {selectedIds.size > 0 && (
-        <div className="sticky bottom-0 left-0 right-0 mt-4 -mx-4 md:-mx-6 px-4 md:px-6 py-3 bg-port-card/95 backdrop-blur border-t border-port-border flex items-center justify-between gap-3 flex-wrap z-20">
+        <div className="sticky bottom-0 left-0 right-0 mt-4 -mx-4 md:-mx-6 px-4 md:px-6 py-3 bg-port-card/95 sm:backdrop-blur border-t border-port-border flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 z-20">
           <span className="text-sm text-white font-medium">
             {selectedIds.size} selected
           </span>
-          <div className="flex items-center gap-2">
-            <div className="relative">
+          {/* The row is the positioning context under `sm` (the per-button
+              wrappers only become `relative` at `sm`), so a menu spans the whole
+              bar on a phone instead of hanging off a ~90px button and running
+              past the viewport edge. Anything that gives an element between the
+              menu and this row a containing block — `relative`, `transform`,
+              `filter`, `contain` — silently re-anchors both menus. */}
+          <div className="relative flex flex-wrap items-center gap-2">
+            <div className="flex-1 sm:relative sm:flex-none">
               <button
                 type="button"
                 onClick={() => { setRemixMenuOpen((o) => !o); setAddMenuOpen(false); }}
                 aria-haspopup="menu"
                 aria-expanded={remixMenuOpen}
-                className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-port-accent hover:bg-port-accent/90 text-white text-sm font-medium"
+                aria-label="Remix into…"
+                className="inline-flex w-full sm:w-auto items-center justify-center gap-2 px-3 py-2 min-h-[40px] rounded-lg bg-port-accent hover:bg-port-accent/90 text-white text-sm font-medium"
               >
-                <Wand2 size={16} aria-hidden="true" />
-                Remix into…
+                <Wand2 size={16} className="shrink-0" aria-hidden="true" />
+                <span className="truncate">Remix<span className="hidden sm:inline"> into…</span></span>
               </button>
               {remixMenuOpen && (
                 <ul
                   role="menu"
-                  className="absolute right-0 bottom-full mb-2 min-w-[180px] bg-port-card border border-port-border rounded-lg shadow-lg overflow-hidden"
+                  className="absolute bottom-full mb-2 left-0 right-0 sm:left-auto sm:min-w-[180px] bg-port-card border border-port-border rounded-lg shadow-lg overflow-hidden"
                 >
                   {REMIX_TARGETS.map((t) => (
                     <li key={t.id} role="none">
@@ -836,22 +867,26 @@ export default function Catalog() {
                 </ul>
               )}
             </div>
-            <div className="relative">
+            <div className="flex-1 sm:relative sm:flex-none">
               <button
                 type="button"
                 onClick={openAddMenu}
                 aria-haspopup="menu"
                 aria-expanded={addMenuOpen}
+                aria-label="Add to universe/series…"
                 title="Place the selected ingredients into a universe or series"
-                className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-port-border bg-port-card hover:bg-port-bg text-white text-sm font-medium disabled:opacity-50"
+                className="inline-flex w-full sm:w-auto items-center justify-center gap-2 px-3 py-2 min-h-[40px] rounded-lg border border-port-border bg-port-card hover:bg-port-bg text-white text-sm font-medium disabled:opacity-50"
               >
-                <FolderPlus size={16} aria-hidden="true" />
-                Add to universe/series…
+                <FolderPlus size={16} className="shrink-0" aria-hidden="true" />
+                <span className="truncate">Add<span className="hidden sm:inline"> to universe/series…</span></span>
               </button>
               {addMenuOpen && (
+                // The bar is pinned to the bottom of the viewport and the menu
+                // opens upward, so cap it against the viewport rather than a
+                // fixed 18rem — in landscape that would run off the top.
                 <div
                   role="menu"
-                  className="absolute right-0 bottom-full mb-2 min-w-[220px] max-h-72 overflow-y-auto bg-port-card border border-port-border rounded-lg shadow-lg"
+                  className="absolute bottom-full mb-2 left-0 right-0 sm:left-auto sm:min-w-[220px] max-h-[60vh] sm:max-h-72 overflow-y-auto bg-port-card border border-port-border rounded-lg shadow-lg"
                 >
                   {placeTargetsLoading || placeTargets === null ? (
                     <p className="px-3 py-2 text-sm text-gray-500">Loading…</p>
@@ -899,9 +934,9 @@ export default function Catalog() {
             <button
               type="button"
               onClick={clearSelection}
-              className="inline-flex items-center gap-1 px-3 py-2 rounded-lg border border-port-border text-gray-300 hover:text-white text-sm"
+              className="inline-flex flex-1 sm:flex-none items-center justify-center gap-1 px-3 py-2 min-h-[40px] rounded-lg border border-port-border text-gray-300 hover:text-white text-sm"
             >
-              <X size={16} aria-hidden="true" />
+              <X size={16} className="shrink-0" aria-hidden="true" />
               Clear
             </button>
           </div>
diff --git a/client/src/pages/Catalog.test.jsx b/client/src/pages/Catalog.test.jsx
index aa1a6e8b63..dd4460072b 100644
--- a/client/src/pages/Catalog.test.jsx
+++ b/client/src/pages/Catalog.test.jsx
@@ -481,4 +481,26 @@ describe('Catalog page', () => {
 
     expect(await screen.findByRole('menuitem', { name: 'Fresh Empty Universe' })).toBeTruthy();
   });
+
+  // These buttons hide the tail of their label on a narrow viewport, so the full
+  // wording has to live in aria-label or the accessible name silently shortens
+  // with the screen. jsdom applies no CSS, so the existing name-based queries
+  // elsewhere in this file would still pass with the aria-label deleted — only
+  // an explicit attribute assertion catches that. The paired textContent check
+  // holds the visible text to a prefix of the name (WCAG 2.5.3 label-in-name).
+  it('keeps the full accessible name on buttons whose visible label shortens on a narrow viewport', async () => {
+    renderCatalog();
+    await waitFor(() => expect(screen.getByText('Echo Saint')).toBeTruthy());
+    fireEvent.click(screen.getByLabelText('Select Echo Saint'));
+
+    for (const [visiblePrefix, fullName] of [
+      ['Sync', 'Sync from Universes'],
+      ['Remix', 'Remix into…'],
+      ['Add', 'Add to universe/series…'],
+    ]) {
+      const btn = screen.getByRole('button', { name: fullName });
+      expect(btn.getAttribute('aria-label')).toBe(fullName);
+      expect(btn.textContent.startsWith(visiblePrefix)).toBe(true);
+    }
+  });
 });