fix(studio): on a touch screen the select options are finger-sized and the context card's expand control and manage link are tall enough to press

desktop/frontend-next/src/styles/kit.css

@@ -80,6 +80,10 @@ select[data-size="sm"] { height: 24px; padding: 0 26px 0 8px; font-size: var(--f
   select:not([multiple]) option::checkmark { order: 1; margin-inline-start: auto; color: var(--accent-ink); }
   select:not([multiple]) option:disabled { color: var(--ghost); cursor: default; }
   select[data-size="sm"] option { min-height: 24px; padding: 2px 8px; font-size: var(--fs-meta); }
+  @media (pointer: coarse) {
+    select:not([multiple]) option { min-height: 40px; }
+    select[data-size="sm"] option { min-height: 40px; }
+  }
 }
 
 .prefs-main :is(input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="url"], input[type="email"], input[type="tel"], input[type="time"]):not(.prefs-find):not(.unit-field input), .prefs-main textarea, .prefs-main .unit-field {

desktop/frontend-next/src/styles/overview.css

@@ -96,3 +96,8 @@
 .chrome-context-card .chrome-context-more::after { content: ""; width: 5px; height: 5px; border-top: 1.45px solid var(--faint); border-right: 1.45px solid var(--faint); transform: rotate(45deg); }
 .chrome-context-card .chrome-context-more[aria-expanded="true"]::after { transform: rotate(135deg); }
 .chrome-context-card:not(.studio-overview-card) > .chrome-context-items { margin: 2px 14px 4px; padding: 2px 0 2px 10px; gap: 2px; }
+@media (pointer: coarse) {
+  .chrome-context-card:not(.studio-overview-card) > .chrome-context-parts > div { height: 36px; }
+  .chrome-context-card .chrome-context-more { min-height: 36px; padding-inline: 8px; margin-inline: -8px; }
+  .chrome-context-card:not(.studio-overview-card) > .chrome-context-foot > .manage { min-height: 36px; padding-inline: 4px; }
+}

desktop/frontend-next/src/styles/select-picker.test.ts

@@ -47,4 +47,8 @@ describe("a select's popup list", () => {
   it("follows the small field's size", () => {
     expect(rule(block(), 'select[data-size="sm"] option')).toMatch(/font-size:\s*var\(--fs-meta\)/);
   });
+
+  it("gives every option a finger-sized row on a touch screen", () => {
+    expect(block()).toMatch(/@media \(pointer: coarse\)\s*\{[^}]*select:not\(\[multiple\]\) option\s*\{[^}]*min-height:\s*40px/);
+  });
 });

desktop/frontend-next/src/ui/ContextSummaryCard.layout.test.ts

@@ -27,3 +27,21 @@ describe("the context card's expanded rows", () => {
     expect(ruleFor("\n.chrome-context-items")).toMatch(/grid-template-columns:\s*minmax\(0,\s*1fr\)/);
   });
 });
+
+// The card is the one place a phone reads the context from; its two controls
+// were a line of text tall.
+describe("the context card on a touch screen", () => {
+  const coarse = (): string => {
+    const at = css.indexOf("@media (pointer: coarse)");
+    return at < 0 ? "" : css.slice(at, css.indexOf("\n}", at));
+  };
+
+  it("makes the expand control and the manage link tall enough to press", () => {
+    expect(coarse()).toMatch(/\.chrome-context-more[^{]*\{[^}]*min-height:\s*(3[2-9]|4\d)px/);
+    expect(coarse()).toMatch(/\.manage[^{]*\{[^}]*min-height:\s*(3[2-9]|4\d)px/);
+  });
+
+  it("gives the rows the room those controls need", () => {
+    expect(coarse()).toMatch(/\.chrome-context-parts > div[^{]*\{[^}]*height:\s*(3[6-9]|4\d)px/);
+  });
+});