Prompt Studio: in a narrow window the reference takes the cards' place

Three columns in a side-panel window left each about 200px, tags one per
line and a sideways scroll. Below 980px the open reference now replaces
the card list (two columns of half the width each), and "‹ Cards" brings
the list back; wide windows keep three columns.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ARCHITECTURE.md

@@ -651,7 +651,7 @@ covered by the `styles.css` manifest.
   library sync and renaming / deleting a saved prompt; `prompt_material_source.js` reads
   saved prompts as cards and saves one; `ui_prompt_reference.js` is the reference column a
   clicked card opens in, between the cards and the boxes (its tags taken one by one or all, ticks
-  on those the box has; it widens the drawer while open); `ui_prompt_card_popover.js` owns the card preview (hover
+  on those the box has; it widens the drawer while open, and takes the cards' place where three columns do not fit); `ui_prompt_card_popover.js` owns the card preview (hover
   corridor, pin, Copy / Add / Rename / Delete); `prompt_card_drag.js` lets a card or a box be
   dragged out of the drawer onto a canvas prompt box or empty canvas (through `material_drag.js`
   and `prompt_drop.js`), passing through inside the drawer so the boxes still take it.

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### 📒 Prompt cards look like notebook pages (提示词卡片换成笔记本样式)
 - In Prompt Studio each card is a page with a bound spine in its colour (green positive, red negative), its title, a Positive / Negative label and its first words as small tags instead of a cut-off line of text. The card open as the reference wears a ribbon; Common and My prompts are index tabs with how many cards they hold. Dark and light themes alike.
+- **The reference no longer squeezes a narrow window**: where three columns do not fit (a side-panel browser window, a narrow drawer), the reference takes the card list's place and **‹ Cards** brings the list back, so the reference and the prompt you edit each get half the width.
 
 ### 🗂️ Tidier model folders (模型文件夹更清爽)
 - **Settings → Models → Files that come with models**: what a scan found (`.info`), your names and notes (`.anomalous.json`) and Civitai's picture kept aside can go **in a hidden `.amb` folder** inside each model folder instead of beside every model, leaving only the model and its cover there. Covers stay beside the model, where ComfyUI and other plugins look. Choosing a place says how many files will move, then moves them (only moves; switch back any time); a file that cannot move still works where it is.

web/modules/locales.js

@@ -1815,6 +1815,7 @@ export const i18n = {
         promptStudioAllThere: "这些词已经都有了",
         promptStudioRefTitle: "参考：{name}",
         promptStudioRefClose: "关掉参考",
+        promptStudioRefBack: "‹ 卡片",
         promptStudioRefAddAll: "全部加入",
         promptStudioRefAddAllHint: "把这张卡片的词一次全加进去（已经有的不重复加）",
         promptStudioRefNote: "点一个词，只把它加进正在改的提示词；打勾的是已经有的。",
@@ -4535,6 +4536,7 @@ export const i18n = {
         promptStudioAllThere: "Those tags are there already",
         promptStudioRefTitle: "Reference: {name}",
         promptStudioRefClose: "Close the reference",
+        promptStudioRefBack: "‹ Cards",
         promptStudioRefAddAll: "Add all",
         promptStudioRefAddAllHint: "Add every tag of this card at once (those there already are not added twice)",
         promptStudioRefNote: "Click a tag to add just that one to the prompt being edited; ticked ones are there already.",

web/modules/ui_prompt_reference.js

@@ -3,7 +3,8 @@
  * boxes, as its tags (with their meanings when a language is picked), so single tags can be
  * taken from it: a click puts that tag into the box the card goes into (ui_prompt_target.js),
  * "Add all" the whole card. Tags the box has already are ticked. Read only: the card itself is
- * never changed here. In the drawer it widens the drawer by the column while it is open.
+ * never changed here. In the drawer it widens the drawer by the column while it is open; where
+ * three columns do not fit it takes the cards' place, and "‹ Cards" goes back (the stylesheet).
  */
 
 import { translate as t } from './locales.js';
@@ -57,7 +58,8 @@ export function createPromptReference(grid, { drawer, scope, prefs, target, onSh
     const addAll = button('anomalous-ps-mini', t('promptStudioRefAddAll'), t('promptStudioRefAddAllHint'), () => {
         if (card) void target.addCard(card).then(render);
     });
-    head.append(label, addAll);
+    const back = button('anomalous-ps-mini anomalous-ps-ref-back', t('promptStudioRefBack'), t('promptStudioRefClose'), () => close());
+    head.append(back, label, addAll);
     const role = el('span', 'anomalous-ps-role');
     const note = el('p', 'anomalous-ps-target-note', t('promptStudioRefNote'));
     const tagsEl = el('div', 'anomalous-ps-tags');

web/styles/21-prompt-studio.css

@@ -806,7 +806,33 @@
     display: none;
 }
 
-/* A narrow drawer stacks the cards over the prompt boxes. */
+/* No room for three columns: the reference takes the cards' place, its "‹ Cards" goes back. */
+.anomalous-ps-ref-back {
+    display: none;
+}
+
+@container anomalous-ps (max-width: 980px) {
+    .anomalous-ps-grid.has-ref .anomalous-ps-deck {
+        display: none;
+    }
+
+    .anomalous-ps-grid.has-ref,
+    .anomalous-prompt-page .anomalous-ps-grid.has-ref,
+    .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-ps-grid.has-ref {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .anomalous-ps-ref-back {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
+    .anomalous-ps-ref .anomalous-ps-target-x {
+        display: none;
+    }
+}
+
+/* A narrow drawer stacks the cards (or the reference) over the prompt boxes. */
 @container anomalous-ps (max-width: 540px) {
     .anomalous-ps-grid,
     .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-ps-grid {
@@ -817,7 +843,7 @@
     .anomalous-ps-grid.has-ref,
     .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-ps-grid.has-ref {
         grid-template-columns: minmax(0, 1fr);
-        grid-template-rows: minmax(100px, 26%) minmax(100px, 30%) minmax(0, 1fr);
+        grid-template-rows: minmax(120px, 40%) minmax(0, 1fr);
     }
 
     .anomalous-ps-deck,