[DONE] 폰에서 Pattern Lab 의 Layers 와 Knobs 단추가 손가락 크기다

web/src/app/pattern-lab/LabPanels.module.css

@@ -471,6 +471,36 @@
   cursor: pointer;
 }
 
+/* Touch screens get fingertip-sized targets, as in the Text panel. On a
+   390px phone the bar buttons were 28px tall, Del 37px wide, the eye 20×17px
+   and the mask box 13×13px. The row grows to 46px so the eye can take its
+   whole height. */
+@media (hover: none) {
+  .layerBar button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .layerRow {
+    min-height: 46px;
+    padding-block: 0;
+  }
+
+  .layerEye {
+    align-self: stretch;
+    width: 44px;
+  }
+
+  .layerMaskLabel {
+    min-height: 44px;
+  }
+
+  .layerControlRow input[type="range"],
+  .layerControlRow select {
+    min-height: 44px;
+  }
+}
+
 /* ── Pixel editor panel ── */
 
 .pixelViewport {

web/src/app/pattern-lab/labCss.test.ts

@@ -6,6 +6,7 @@
 // and 44×44px after, in a header 59px tall both times. On a 390×844 touch
 // screen the tab strip under Preview was 736px for 333px of room, and every
 // tab carried a 27×27px ×. Without the × it is 520px and Knobs shows whole.
+// On the same screen Del was 37×28px, the layer eye 20×17px and Push 40×22px.
 
 import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
@@ -113,3 +114,57 @@ describe("Lab dock on a touch screen", () => {
     expect(shown).not.toMatch(/display:/);
   });
 });
+
+describe("Layers and Knobs on a touch screen", () => {
+  const dock = css("LabPanels.module.css");
+  const knobs = css("panels/KnobsPanel.module.css");
+  const layers = css("panels/LayersPanel.tsx");
+  const touch = (source: string, selector: string) => mediaRule(source, "(hover: none)", selector);
+
+  it("give the Layers bar buttons a 44px box", () => {
+    const button = touch(dock, ".layerBar button");
+    expect(button).toMatch(/min-width: 44px;/);
+    expect(button).toMatch(/min-height: 44px;/);
+    // Only the Layers bar: the Pixel toolbars carry a dozen buttons each.
+    expect(layers).toMatch(/className=\{`\$\{dock\.panelBar\} \$\{dock\.layerBar\}`\}/);
+    expect(touch(dock, ".panelBar button")).toBe("");
+  });
+
+  it("let the eye fill a 44px row", () => {
+    const row = touch(dock, ".layerRow");
+    expect(row).toMatch(/min-height: 46px;/);
+    expect(row).toMatch(/padding-block: 0;/);
+    const eye = touch(dock, ".layerEye");
+    expect(eye).toMatch(/align-self: stretch;/);
+    expect(eye).toMatch(/width: 44px;/);
+  });
+
+  it("give the mask, opacity and blend rows a 44px height", () => {
+    expect(touch(dock, ".layerMaskLabel")).toMatch(/min-height: 44px;/);
+    expect(touch(dock, ".layerControlRow select")).toMatch(/min-height: 44px;/);
+    expect(mediaBlocks(dock, "(hover: none)").join("")).toContain('.layerControlRow input[type="range"],\n  .layerControlRow select {');
+  });
+
+  it("give Push a 44px box", () => {
+    const push = touch(knobs, ".knobButton");
+    expect(push).toMatch(/min-width: 44px;/);
+    expect(push).toMatch(/min-height: 44px;/);
+  });
+
+  it("come after the rules they override", () => {
+    // Same specificity again, so each touch block has to sit below them.
+    const dockTouch = dock.lastIndexOf("@media (hover: none) {");
+    for (const base of [
+      "\n.panelBar button {",
+      "\n.layerRow {",
+      "\n.layerEye {",
+      "\n.layerControlRow select {",
+      "\n.layerMaskLabel {",
+    ]) {
+      expect(dock.indexOf(base)).toBeGreaterThan(-1);
+      expect(dockTouch).toBeGreaterThan(dock.indexOf(base));
+    }
+    // The 980px block sets Push back to 22px.
+    expect(knobs.lastIndexOf("@media (hover: none) {")).toBeGreaterThan(knobs.indexOf("@media (max-width: 980px) {"));
+  });
+});

web/src/app/pattern-lab/panels/KnobsPanel.module.css

@@ -217,3 +217,12 @@
     gap: 4px;
   }
 }
+
+/* Touch screens get a fingertip-sized Push, as the Text panel gives its
+   fields. On a 390px phone it was 40×22px. */
+@media (hover: none) {
+  .knobButton {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}

web/src/app/pattern-lab/panels/LayersPanel.tsx

@@ -57,7 +57,7 @@ export default function LayersPanel() {
 
   return (
     <div className={dock.panel}>
-      <div className={dock.panelBar}>
+      <div className={`${dock.panelBar} ${dock.layerBar}`}>
         <button
           type="button"
           onClick={() => {