@lightworkai.official/debug-capture 0.14.1 → 0.14.3

package/src/ui/element.ts

@@ -148,18 +148,76 @@ function createReporterClass(): CustomElementConstructor {
       this.returnFocus = active instanceof HTMLElement && active !== document.body ? active : null;
       const t = strings(getConfig().locale);
       /*
-       * One door: the press takes the screen and opens the report form,
-       * always. Asking the team is a choice made IN that form — เป็นคำขอ?
-       * เลือกเรื่องที่ขอ — never a door before it (docs/WIDGET-ASK-PLAN.md): a
-       * chooser here cost every press one more click to serve the one in
-       * twelve that asks, and a press before the offer was read had no way to
-       * ask at all. The offer is read without waiting — the share needs this
-       * click — and the form shows the door whenever it lands.
+       * The owner's order (docs/WIDGET-ASK-PLAN.md, 0.14.2): where the desk
+       * offers something to ask, the press asks first — แจ้งปัญหา or คำขอ —
+       * because a request has no use for the screen and must not be asked to
+       * share it. Read from what is already known, never awaited: the share
+       * has to start inside the press that chose แจ้งปัญหา. An offer not read
+       * yet is the report as it always was, and its form shows the two cards
+       * when the offer lands.
        */
-      if (requestTypesNow() === null) void loadRequestTypes();
+      const offered = requestTypesNow();
+      if (offered === null) void loadRequestTypes();
+      if (reason.type === "manual" && offered?.length) {
+        this.renderChooser(t, reason);
+        return;
+      }
       await this.report(reason, t);
     }
 
+    /** แจ้งปัญหา or คำขอ — the two cards, before anything is asked of the browser. */
+    private renderChooser(t: Strings, reason: DebugReason): void {
+      const panel = this.shell(t);
+      panel.classList.add("narrow");
+      panel.setAttribute("aria-label", t.chooseTitle);
+      const head = el("div", "head");
+      const closeBtn = button("✕", "icon");
+      closeBtn.setAttribute("aria-label", t.close);
+      closeBtn.addEventListener("click", () => this.close());
+      head.append(el("h2", "", t.chooseTitle), closeBtn);
+
+      const problem = kindButton("problem", BUG, t.kindProblem, t.chooseProblemHint);
+      problem.dataset.choose = "problem";
+      // Our own dialog leaves the screen before the share starts, or it is in the picture.
+      problem.addEventListener("click", () => {
+        this.root.replaceChildren();
+        void this.report(reason, t);
+      });
+      const ask = kindButton("request", WORKFLOW, t.kindRequest, t.chooseRequestHint);
+      ask.dataset.choose = "request";
+      // A request: no share asked for. The page's address still travels with it.
+      ask.addEventListener("click", () => {
+        this.bundle = buildBundle({ reason, note: "", screenshotDataUrl: null, screenshotMethod: "none", erroredQueries: safeQueries() });
+        this.renderForm(t, reason, "request");
+      });
+      const choices = el("div", "kinds choose");
+      choices.append(problem, ask);
+      choices.addEventListener("keydown", (e) => {
+        if (!ARROWS.includes(e.key)) return;
+        e.preventDefault();
+        (this.root.activeElement === problem ? ask : problem).focus();
+      });
+      panel.append(head, choices);
+      problem.focus();
+    }
+
+    /**
+     * คำขอ → แจ้งปัญหา on a request that began with no screen: the share is
+     * asked for now, inside this press, with our dialog off the screen. What
+     * was typed crosses over; a share refused goes back to the request, as it
+     * was.
+     */
+    private async switchToReport(t: Strings, reason: DebugReason, carried: Draft): Promise<void> {
+      this.root.replaceChildren();
+      const shot = await captureScreen();
+      if (shot.method === "cancelled") {
+        this.renderForm(t, reason, "request", { ...carried, asking: true });
+        return;
+      }
+      this.bundle = buildBundle({ reason, note: "", screenshotDataUrl: shot.dataUrl, screenshotMethod: shot.method, erroredQueries: safeQueries() });
+      this.renderForm(t, reason, "problem", carried);
+    }
+
     /** A report: the screen first, then the form — see open(). Called inside a click, with nothing awaited before the capture. */
     private async report(reason: DebugReason, t: Strings): Promise<void> {
       /*
@@ -186,7 +244,7 @@ function createReporterClass(): CustomElementConstructor {
         screenshotMethod: shot.method,
         erroredQueries: safeQueries(),
       });
-      this.renderForm(t, reason);
+      this.renderForm(t, reason, "problem");
     }
 
     /** Closed unsent, what was typed is kept for the next press; sent, it is gone. */
@@ -236,11 +294,13 @@ function createReporterClass(): CustomElementConstructor {
      * leaves the page's logs behind — they are a problem's evidence, not an
      * ask's — and its picture can be taken off.
      */
-    private renderForm(t: Strings, reason: DebugReason): void {
+    private renderForm(t: Strings, reason: DebugReason, start: "problem" | "request", carried?: Draft): void {
       const bundle = this.bundle;
       if (!bundle) return;
       const panel = this.shell(t);
-      let mode: "problem" | "request" = "problem";
+      let mode: "problem" | "request" = start;
+      // Was the screen asked for? A request chosen first was not — แจ้งปัญหา asks for it then.
+      const screenTaken = start === "problem" || !!bundle.screenshotDataUrl;
       let chosen: RequestTypeOption | null = null;
 
       const head = el("div", "head");
@@ -251,44 +311,47 @@ function createReporterClass(): CustomElementConstructor {
       head.append(heading, closeBtn);
 
       /*
-       * แจ้งปัญหา or คำขอ — two cards under the heading, the way the desk's own
-       * สร้างเวิร์กโฟลว์ asks it, shown only where the desk offers something to
-       * ask. แจ้งปัญหา is chosen as the form opens (the press is a report for
-       * most, so no click is added); either card switches the form, any time,
-       * and nothing typed is lost by it.
+       * The kind was chosen at the press (renderChooser); the form names it in
+       * its heading and keeps one quiet line to switch — the owner: "no need
+       * to be card style since that select it on the first dialog". Switching
+       * keeps what was typed; to แจ้งปัญหา from a request that began with no
+       * screen, the share is asked for at that press (switchToReport). Shown
+       * only where the desk offers something to ask.
        */
-      const kinds = el("div", "kinds");
-      kinds.hidden = true;
-      kinds.setAttribute("role", "radiogroup");
-      kinds.setAttribute("aria-label", t.chooseTitle);
-      const kindCard = (kind: "problem" | "request", icon: IconNode, title: string, hint: string) => {
-        const card = button("", "kind");
-        card.setAttribute("role", "radio");
-        card.dataset.kind = kind;
-        const top = el("span", "kind-top");
-        top.append(svgIcon(icon), el("b", "", title));
-        card.append(top, el("span", "kind-hint", hint), svgIcon(CHECK, "tick"));
-        card.addEventListener("click", () => setMode(kind));
-        return card;
-      };
-      const problemCard = kindCard("problem", BUG, t.kindProblem, t.kindProblemHint);
-      const requestCard = kindCard("request", WORKFLOW, t.kindRequest, t.kindRequestHint);
-      kinds.append(problemCard, requestCard);
-      // A radio group's own keys: an arrow moves the choice, and the focus with it.
-      kinds.addEventListener("keydown", (e) => {
-        if (!ARROWS.includes(e.key)) return;
-        e.preventDefault();
-        setMode(mode === "problem" ? "request" : "problem");
-        (mode === "problem" ? problemCard : requestCard).focus();
-      });
+      const door = el("p", "door");
+      door.hidden = true;
+      const doorText = el("span");
+      const doorBtn = button("", "link");
+      doorBtn.dataset.switchKind = "";
+      doorBtn.addEventListener("click", () => setMode(mode === "problem" ? "request" : "problem"));
+      door.append(doorText, doorBtn);
 
-      // What is asked for: one card each — the type's own words and how long the team means to take, as the portal shows them.
+      /*
+       * What is asked for: a row each. The one chosen opens up — its words and
+       * how long the team means to take, as the portal shows them — and the
+       * rest stay one line, so a desk with 10 or 20 types is still a list to
+       * read, not a page to scroll. From SEARCH_FROM types there is a search
+       * over them, and the list scrolls within its own height.
+       */
       const ask = el("div", "ask");
       ask.hidden = true;
+      const typeSearch = document.createElement("input");
+      // A search, not a text field: the title stays the dialog's one text input.
+      typeSearch.type = "search";
+      typeSearch.className = "type-search";
+      typeSearch.placeholder = t.requestTypeSearch;
+      typeSearch.setAttribute("aria-label", t.requestTypeSearch);
+      typeSearch.dataset.requestTypeSearch = "";
+      typeSearch.hidden = true;
       const typeList = el("div", "types");
       typeList.setAttribute("role", "radiogroup");
       typeList.setAttribute("aria-label", t.requestTypeLabel);
-      ask.append(labelFor(t.requestTypeLabel, "", true), typeList);
+      const typeNone = el("p", "status", t.requestTypeNone);
+      typeNone.hidden = true;
+      // A long list says how many it holds — the rows past its edge are otherwise unseen.
+      const typeCount = el("p", "status type-count", "");
+      typeCount.hidden = true;
+      ask.append(labelFor(t.requestTypeLabel, "", true), typeSearch, typeList, typeNone, typeCount);
       const typeCards: HTMLButtonElement[] = [];
       const markType = () => {
         for (const card of typeCards) {
@@ -296,6 +359,13 @@ function createReporterClass(): CustomElementConstructor {
           card.setAttribute("aria-checked", String(on));
           card.tabIndex = on ? 0 : -1;
         }
+        // The chosen one in view inside the list's own scroll, never the dialog's.
+        const on = typeCards.find((c) => c.dataset.requestType === chosen?.id);
+        if (on && typeList.scrollHeight > typeList.clientHeight) {
+          const top = on.offsetTop - typeList.offsetTop;
+          if (top < typeList.scrollTop) typeList.scrollTop = top;
+          else if (top + on.offsetHeight > typeList.scrollTop + typeList.clientHeight) typeList.scrollTop = top + on.offsetHeight - typeList.clientHeight;
+        }
       };
 
       const summary = document.createElement("input");
@@ -351,12 +421,11 @@ function createReporterClass(): CustomElementConstructor {
 
       const apply = () => {
         const asking = mode === "request";
-        heading.textContent = kinds.hidden ? t.title : t.chooseTitle;
+        heading.textContent = asking ? t.requestTitle : t.title;
         panel.setAttribute("aria-label", asking ? t.requestTitle : t.title);
-        for (const [card, on] of [[problemCard, !asking], [requestCard, asking]] as const) {
-          card.setAttribute("aria-checked", String(on));
-          card.tabIndex = on ? 0 : -1;
-        }
+        doorText.textContent = `${asking ? t.problemInstead : t.askInstead} `;
+        // From a request that began with no screen, แจ้งปัญหา will ask for it — said on the line.
+        doorBtn.textContent = asking ? (screenTaken ? t.problemInsteadAction : t.problemInsteadShare) : t.askInsteadAction;
         ask.hidden = !asking;
         fillLabel(summaryLabel, asking ? t.requestSummaryLabel : t.summaryLabel, asking ? "" : t.summaryRequired, true);
         summary.placeholder = asking ? t.requestSummaryPlaceholder : t.summaryPlaceholder;
@@ -366,16 +435,24 @@ function createReporterClass(): CustomElementConstructor {
         logs.v.textContent = asking ? t.requestLeavesWhat : captured;
         shotChoice.hidden = !asking || !bundle.screenshotDataUrl;
         if (markWhat) fillLabel(markWhat, asking ? t.requestAnnotateHint : t.annotateHint);
-        for (const node of shot) node.classList.toggle("dropped", asking && !withShot.checked);
+        for (const node of shot) {
+          node.classList.toggle("dropped", asking && !withShot.checked);
+          // A request that began with no screen has no picture to speak of.
+          node.hidden = asking && !bundle.screenshotDataUrl;
+        }
         submitBtn.textContent = asking ? t.requestSubmit : t.submit;
         ready();
       };
       withShot.addEventListener("change", apply);
-      function setMode(next: "problem" | "request"): void {
+      const setMode = (next: "problem" | "request"): void => {
         if (next === mode) return;
+        if (next === "problem" && !screenTaken) {
+          void this.switchToReport(t, reason, { title: summary.value, detail: detail.value, asking: false, typeId: chosen?.id ?? null });
+          return;
+        }
         mode = next;
         apply();
-      }
+      };
 
       /*
        * What the desk offers, as soon as it is known: now, or when the read
@@ -407,27 +484,58 @@ function createReporterClass(): CustomElementConstructor {
           typeCards.push(card);
         }
         typeList.replaceChildren(...typeCards);
+        // ↑ ↓ among the rows the search leaves.
         typeList.onkeydown = (e) => {
           if (!ARROWS.includes(e.key) || !chosen) return;
           e.preventDefault();
-          const at = types.findIndex((x) => x.id === chosen!.id);
+          const shown = types.filter((x, i) => !typeCards[i]!.hidden);
+          if (!shown.length) return;
+          const at = shown.findIndex((x) => x.id === chosen!.id);
           const step = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1;
-          chosen = types[(at + step + types.length) % types.length]!;
+          chosen = shown[at < 0 ? 0 : (at + step + shown.length) % shown.length]!;
           markType();
           typeCards.find((c) => c.dataset.requestType === chosen!.id)?.focus();
         };
+        typeList.classList.toggle("long", types.length >= SEARCH_FROM);
+        typeSearch.hidden = types.length < SEARCH_FROM;
+        const count = (n: number) => {
+          typeCount.hidden = types.length < SEARCH_FROM || n === 0;
+          typeCount.textContent = t.requestTypeCount.replace("{n}", String(n));
+        };
+        count(types.length);
+        typeSearch.oninput = () => {
+          const q = typeSearch.value.trim().toLowerCase();
+          let first: RequestTypeOption | null = null;
+          types.forEach((x, i) => {
+            const hit = !q || `${x.name} ${x.description}`.toLowerCase().includes(q);
+            typeCards[i]!.hidden = !hit;
+            if (hit && !first) first = x;
+          });
+          typeNone.hidden = !!first;
+          count(typeCards.filter((c) => !c.hidden).length);
+          // The choice follows the search when the one chosen is filtered out.
+          if (first && chosen && typeCards[types.indexOf(chosen)]!.hidden) chosen = first;
+          markType();
+          ready();
+        };
+        // Enter in the search goes to the chosen row, not the send button.
+        typeSearch.onkeydown = (e) => {
+          if (e.key === "ArrowDown" || e.key === "Enter") {
+            e.preventDefault();
+            typeCards.find((c) => c.dataset.requestType === chosen?.id && !c.hidden)?.focus();
+          }
+        };
         markType();
-        kinds.hidden = false;
+        door.hidden = false;
         apply();
       };
       /*
        * What was typed last time and not sent comes back, said so — with a
-       * way to clear it. A request goes back to being one once its type is
-       * offered again.
+       * way to clear it. Carried across a switch, the words are simply there.
        */
-      const restored = draft && (draft.title || draft.detail) ? draft : null;
+      const restored = carried ?? (draft && (draft.title || draft.detail) ? draft : null);
       const again = el("p", "draft");
-      again.hidden = !restored;
+      again.hidden = !restored || !!carried;
       if (restored) {
         summary.value = restored.title;
         detail.value = restored.detail;
@@ -446,20 +554,19 @@ function createReporterClass(): CustomElementConstructor {
       const known = requestTypesNow();
       const offerAndRestore = (types: RequestTypeOption[]) => {
         offer(types);
-        if (!restored?.asking || kinds.hidden) return;
+        // The kind is the press's choice; a request's type comes back as it was.
+        if (mode !== "request" || door.hidden || !restored?.typeId) return;
         const was = types.find((x) => x.id === restored.typeId);
         if (was) {
           chosen = was;
           markType();
         }
-        mode = "request";
-        apply();
       };
       if (known) offerAndRestore(known);
       else if (reason.type === "manual") void loadRequestTypes().then(offerAndRestore);
       this.keep = () => ({ title: summary.value, detail: detail.value, asking: mode === "request", typeId: chosen?.id ?? null });
 
-      panel.append(head, kinds, again, ask, summaryLabel, summary, detailLabel, detail, meta, shotChoice, ...shot);
+      panel.append(head, door, again, ask, summaryLabel, summary, detailLabel, detail, meta, shotChoice, ...shot);
       const foot = el("div", "foot");
       const cancel = button(t.close);
       cancel.addEventListener("click", () => this.close());
@@ -593,6 +700,8 @@ function hoursWords(t: Strings, h: number): string {
 }
 
 const ARROWS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+/** From this many request types, the list gets a search and scrolls in its own height. */
+const SEARCH_FROM = 7;
 
 /*
  * The desk's own icons (lucide, as its สร้างเวิร์กโฟลว์ and the portal draw
@@ -623,6 +732,16 @@ const CLOCK: IconNode = [
 ];
 const CHECK: IconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
 const SVG_NS = "http://www.w3.org/2000/svg";
+/** A card for แจ้งปัญหา or คำขอ — the chooser's and the form's, one drawing. */
+function kindButton(kind: "problem" | "request", icon: IconNode, title: string, hint: string): HTMLButtonElement {
+  const card = button("", "kind");
+  card.dataset.kind = kind;
+  const top = el("span", "kind-top");
+  top.append(svgIcon(icon), el("b", "", title));
+  card.append(top, el("span", "kind-hint", hint), svgIcon(CHECK, "tick"));
+  return card;
+}
+
 function svgIcon(nodes: IconNode, className = "icon"): SVGSVGElement {
   const svg = document.createElementNS(SVG_NS, "svg");
   for (const [k, v] of Object.entries({ viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", class: className })) svg.setAttribute(k, v);

package/src/ui/strings.ts

@@ -65,17 +65,29 @@ export interface Strings {
   handoffBlocked: string;
   handoffOpen: string;
   /*
-   * ขอให้ทีมดำเนินการ — the same dialog turned into a request, where the desk
-   * opens request types to its reporters (docs/WIDGET-ASK-PLAN.md): two cards
-   * under the heading, แจ้งปัญหา chosen as it opens, either one any time.
+   * ขอให้ทีมดำเนินการ, where the desk opens request types to its reporters
+   * (docs/WIDGET-ASK-PLAN.md): the press asks first with two cards; the form
+   * keeps one quiet line to switch.
    */
   chooseTitle: string;
   kindProblem: string;
-  kindProblemHint: string;
   kindRequest: string;
-  kindRequestHint: string;
+  askInstead: string;
+  askInsteadAction: string;
+  problemInstead: string;
+  problemInsteadAction: string;
+  /** The same, from a request that began with no screen: the share will be asked for. */
+  problemInsteadShare: string;
+  /** On the cards before anything is asked of the browser: what each will do. */
+  chooseProblemHint: string;
+  chooseRequestHint: string;
   requestTitle: string;
   requestTypeLabel: string;
+  /** Over a long list of types: the search, and what it says when nothing matches. */
+  requestTypeSearch: string;
+  requestTypeNone: string;
+  /** Carries `{n}`. */
+  requestTypeCount: string;
   /** Carries `{time}`. */
   requestTarget: string;
   requestSummaryLabel: string;
@@ -143,11 +155,19 @@ const th: Strings = {
   handoffOpen: "เปิดในแท็บใหม่",
   chooseTitle: "ต้องการให้ทีมช่วยเรื่องอะไร",
   kindProblem: "แจ้งปัญหา",
-  kindProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้",
   kindRequest: "คำขอ",
-  kindRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล",
+  askInstead: "เป็นคำขอ?",
+  askInsteadAction: "เลือกเรื่องที่ขอ",
+  problemInstead: "เป็นปัญหาที่ต้องแก้?",
+  problemInsteadAction: "แจ้งปัญหาแทน",
+  problemInsteadShare: "แจ้งปัญหาแทน (แนบภาพหน้าจอ)",
+  chooseProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้ — แนบภาพหน้าจอ",
+  chooseRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล — ไม่ต้องแชร์หน้าจอ",
   requestTitle: "ขอให้ทีมดำเนินการ",
   requestTypeLabel: "เรื่องที่ขอ",
+  requestTypeSearch: "ค้นหาเรื่องที่ขอ",
+  requestTypeNone: "ไม่พบเรื่องที่ขอ — ลองคำอื่น",
+  requestTypeCount: "{n} เรื่อง — เลื่อนดูหรือพิมพ์ค้นหา",
   requestTarget: "ทีมตั้งใจให้เสร็จภายใน {time}",
   requestSummaryLabel: "หัวข้อ",
   requestSummaryPlaceholder: "ขออะไร — สั้น ๆ",
@@ -210,11 +230,19 @@ const en: Strings = {
   handoffOpen: "Open in a new tab",
   chooseTitle: "How can the team help?",
   kindProblem: "Report a problem",
-  kindProblemHint: "Something is broken or not working",
   kindRequest: "Request",
-  kindRequestHint: "Ask the team to do something, like access or a data change",
+  askInstead: "Asking for something?",
+  askInsteadAction: "Choose what you need",
+  problemInstead: "Something broken?",
+  problemInsteadAction: "Report a problem instead",
+  problemInsteadShare: "Report a problem instead (with a screenshot)",
+  chooseProblemHint: "Something is broken or not working — with a screenshot",
+  chooseRequestHint: "Ask the team to do something, like access or a data change — no screen sharing",
   requestTitle: "Ask the team",
   requestTypeLabel: "What you need",
+  requestTypeSearch: "Search what you need",
+  requestTypeNone: "Nothing matches — try another word",
+  requestTypeCount: "{n} to choose from — scroll or search",
   requestTarget: "The team aims to finish within {time}",
   requestSummaryLabel: "Subject",
   requestSummaryPlaceholder: "What do you need — briefly",

package/src/ui/styles.ts

@@ -34,11 +34,11 @@ h2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
 label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
 .req { color: #dc2626; }
 .hint { font-weight: 400; color: #64748b; }
-input[type="text"], textarea, select {
+input[type="text"], input[type="search"], textarea, select {
   width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
   border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;
 }
-input[type="text"]:focus, textarea:focus, select:focus {
+input[type="text"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
   outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
 }
 textarea { min-height: 88px; resize: vertical; }
@@ -98,7 +98,14 @@ canvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; b
    แจ้งปัญหา · คำขอ as two cards under the heading, the way the desk's own
    สร้างเวิร์กโฟลว์ asks it; what is asked for as cards, the way the portal lists it. */
 [hidden] { display: none !important; }
-.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -4px; }
+/* The press's choice: two cards in a smaller dialog, before anything is asked of the browser. */
+.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+/* In the form, the choice is made: one quiet line under the heading to switch. */
+.door { margin: -8px 0 0; font-size: 13px; color: #64748b; }
+.panel.narrow { width: min(560px, 100%); }
+.kinds.choose { margin: 0 0 24px; }
+.kinds.choose button.kind { padding: 16px 18px; gap: 6px; }
+.kinds.choose .kind-hint { font-size: 13px; }
 button.kind {
   position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
   padding: 12px 34px 12px 14px; text-align: left; border-radius: 12px;
@@ -115,7 +122,16 @@ button.kind[aria-checked="true"], button.kind[aria-checked="true"]:hover:not(:di
 button.kind[aria-checked="true"] .tick { opacity: 1; }
 button.kind:focus-visible, button.type:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
 button.kind[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 1px #2563eb, 0 0 0 3px rgba(37, 99, 235, 0.25); }
-.types { display: grid; gap: 8px; }
+.types { display: grid; gap: 6px; }
+/* A long list scrolls in its own height, so the title and ส่งคำขอ stay near. */
+.types.long { max-height: 300px; overflow-y: auto; padding: 2px; margin: -2px; overscroll-behavior: contain; }
+.type-search { margin-bottom: 8px; }
+.ask .type-count { margin: 6px 0 0; font-size: 12px; }
+/* The rest are one line: only the chosen one opens up with its words and the team's time. */
+button.type:not([aria-checked="true"]) { padding: 8px 12px; align-items: center; }
+button.type:not([aria-checked="true"]) .type-hint, button.type:not([aria-checked="true"]) .type-due { display: none; }
+button.type:not([aria-checked="true"]) .type-body b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+button.type:not([aria-checked="true"]) .icon { margin-top: 0; }
 button.type {
   display: flex; align-items: flex-start; gap: 10px; width: 100%;
   padding: 10px 12px; text-align: left; border-radius: 10px;