From ba0432092622fd327d3802075d109c890015de6c Mon Sep 17 00:00:00 2001
From: Dusk <pxiaorong@gmail.com>
Date: Fri, 24 Apr 2026 18:50:39 +0800
Subject: [PATCH] fix(settings): make card field controls fluid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文: 设置页卡片类型行的模板和字段控件改为自适应宽度，保留同一行布局并减少过宽下拉框。

English: Make card type template and field controls fluid while preserving the single-row settings layout and reducing oversized dropdowns.
---
 src/presentation/settings/PluginSettingTab.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/presentation/settings/PluginSettingTab.ts b/src/presentation/settings/PluginSettingTab.ts
index a47de49..5173125 100644
--- a/src/presentation/settings/PluginSettingTab.ts
+++ b/src/presentation/settings/PluginSettingTab.ts
@@ -258,7 +258,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
 
     const ankiRow = blockEl.createDiv();
     ankiRow.style.display = "grid";
-    ankiRow.style.gridTemplateColumns = "max-content 260px max-content 160px max-content 160px";
+    ankiRow.style.gridTemplateColumns = "max-content clamp(140px, 20vw, 220px) max-content clamp(96px, 12vw, 140px) max-content clamp(96px, 12vw, 140px)";
     ankiRow.style.alignItems = "center";
     ankiRow.style.columnGap = "12px";
     ankiRow.style.rowGap = "8px";
@@ -267,7 +267,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
     const noteTypeGroup = this.createGridControlSlot(ankiRow, t("settings.cards.cardTypes.labels.noteType"));
     const noteTypeSelect = this.createSelect(noteTypeGroup, `card-type-note-type:${configId}`);
     noteTypeSelect.dataset.cardTypeNoteType = configId;
-    this.applyEllipsisWidth(noteTypeSelect, "260px");
+    this.applyFluidEllipsis(noteTypeSelect);
     for (const noteModel of this.getSelectableNoteModels(config.noteType)) {
       this.appendOption(noteTypeSelect, noteModel, noteModel);
     }
@@ -286,7 +286,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
       const mainFieldGroup = this.createGridControlSlot(containerEl, t("settings.cards.cardTypes.labels.mainField"));
       const mainFieldSelect = this.createFieldSelect(mainFieldGroup, `card-type-question-field:${configId}`);
       mainFieldSelect.dataset.cardTypeQuestionField = configId;
-      this.applyEllipsisWidth(mainFieldSelect, "180px");
+      this.applyFluidEllipsis(mainFieldSelect);
       this.populateFieldSelect(mainFieldSelect, mapping?.loadedFieldNames ?? [], mapping?.mainField);
       mainFieldSelect.addEventListener("change", () => {
         void this.saveFieldMapping(configId, { mainField: mainFieldSelect.value || undefined });
@@ -297,7 +297,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
     const titleFieldGroup = this.createGridControlSlot(containerEl, t("settings.cards.cardTypes.labels.questionField"));
     const titleFieldSelect = this.createFieldSelect(titleFieldGroup, `card-type-question-field:${configId}`);
     titleFieldSelect.dataset.cardTypeQuestionField = configId;
-    this.applyEllipsisWidth(titleFieldSelect, "160px");
+    this.applyFluidEllipsis(titleFieldSelect);
     this.populateFieldSelect(titleFieldSelect, mapping?.loadedFieldNames ?? [], mapping?.titleField);
     titleFieldSelect.addEventListener("change", () => {
       void this.saveFieldMapping(configId, { titleField: titleFieldSelect.value || undefined });
@@ -306,7 +306,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
     const bodyFieldGroup = this.createGridControlSlot(containerEl, t("settings.cards.cardTypes.labels.answerField"));
     const bodyFieldSelect = this.createFieldSelect(bodyFieldGroup, `card-type-answer-field:${configId}`);
     bodyFieldSelect.dataset.cardTypeAnswerField = configId;
-    this.applyEllipsisWidth(bodyFieldSelect, "160px");
+    this.applyFluidEllipsis(bodyFieldSelect);
     this.populateFieldSelect(bodyFieldSelect, mapping?.loadedFieldNames ?? [], mapping?.bodyField);
     bodyFieldSelect.addEventListener("change", () => {
       void this.saveFieldMapping(configId, { bodyField: bodyFieldSelect.value || undefined });
@@ -907,10 +907,10 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
     return slotEl;
   }
 
-  private applyEllipsisWidth(element: HTMLElement, width: string): void {
-    element.style.width = width;
-    element.style.maxWidth = width;
-    element.style.minWidth = width;
+  private applyFluidEllipsis(element: HTMLElement): void {
+    element.style.width = "100%";
+    element.style.maxWidth = "100%";
+    element.style.minWidth = "0";
     element.style.overflow = "hidden";
     element.style.textOverflow = "ellipsis";
     element.style.whiteSpace = "nowrap";