From d8bd1ebf12cc40156e33e7073a9565c4975dcd70 Mon Sep 17 00:00:00 2001
From: Dusk <pxiaorong@gmail.com>
Date: Fri, 24 Apr 2026 18:59:04 +0800
Subject: [PATCH] fix(settings): keep Anki field row inside cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文: 将 Anki 模板、问题字段、答案字段改为三个整体自适应分组，避免最后一组被卡片边界裁切。

English: Group the Anki template, question field, and answer field controls into three adaptive columns so the row stays inside each card.
---
 src/presentation/settings/PluginSettingTab.ts | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/presentation/settings/PluginSettingTab.ts b/src/presentation/settings/PluginSettingTab.ts
index 5173125..daf411e 100644
--- a/src/presentation/settings/PluginSettingTab.ts
+++ b/src/presentation/settings/PluginSettingTab.ts
@@ -258,11 +258,12 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
 
     const ankiRow = blockEl.createDiv();
     ankiRow.style.display = "grid";
-    ankiRow.style.gridTemplateColumns = "max-content clamp(140px, 20vw, 220px) max-content clamp(96px, 12vw, 140px) max-content clamp(96px, 12vw, 140px)";
+    ankiRow.style.gridTemplateColumns = "minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr)";
     ankiRow.style.alignItems = "center";
-    ankiRow.style.columnGap = "12px";
+    ankiRow.style.columnGap = "16px";
     ankiRow.style.rowGap = "8px";
     ankiRow.style.overflow = "hidden";
+    ankiRow.style.width = "100%";
 
     const noteTypeGroup = this.createGridControlSlot(ankiRow, t("settings.cards.cardTypes.labels.noteType"));
     const noteTypeSelect = this.createSelect(noteTypeGroup, `card-type-note-type:${configId}`);
@@ -897,10 +898,19 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
   }
 
   private createGridControlSlot(containerEl: HTMLElement, label: string): HTMLElement {
-    const labelEl = containerEl.createEl("span", { text: label });
-    labelEl.style.whiteSpace = "nowrap";
+    const groupEl = containerEl.createEl("label");
+    groupEl.style.display = "flex";
+    groupEl.style.alignItems = "center";
+    groupEl.style.gap = "8px";
+    groupEl.style.minWidth = "0";
+    groupEl.style.overflow = "hidden";
 
-    const slotEl = containerEl.createDiv();
+    const labelEl = groupEl.createEl("span", { text: label });
+    labelEl.style.whiteSpace = "nowrap";
+    labelEl.style.flex = "0 0 auto";
+
+    const slotEl = groupEl.createDiv();
+    slotEl.style.flex = "1 1 0";
     slotEl.style.minWidth = "0";
     slotEl.style.overflow = "hidden";