mevebu 1.4.0 → 1.4.2

package/mevebu/app/mevebu.js

@@ -130,7 +130,7 @@ function masthead() {
     el(
       "div",
       { class: "mx-[var(--margin)] flex h-[var(--bar)] items-center gap-[clamp(14px,3vw,32px)]" },
-      el("a", { class: "inline-flex flex-none items-center gap-2.5 text-lg font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
+      el("a", { class: "inline-flex min-h-11 flex-none items-center gap-2.5 text-lg font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
         el("img", { class: "block size-[30px] rounded-[9px] shadow-[0_0_0_1px_var(--orbit)]", src: "./icon.png", alt: "", width: "30", height: "30" }), "mevebu"),
       nav,
       el("div", { class: "flex items-center gap-0.5 max-[45rem]:ms-auto" }, searchButton(), themeBtn, menuBtn)
@@ -259,12 +259,14 @@ function footer() {
     },
   });
 
-  const FOOT_LINK = "text-sm text-ink-2 no-underline hover:text-jade";
+  // A finger needs 44px on a phone, so the whole list is a comfortable target
+  // there. The desktop row stays as it was, at text height.
+  const FOOT_LINK = "inline-flex items-center text-sm text-ink-2 no-underline hover:text-jade max-[45rem]:min-h-11";
   const group = (title, links) =>
     el(
       "div",
       {},
-      el("h4", { class: "m-0 mb-2.5 text-2xs font-bold tracking-[0.08em] text-ink-3 uppercase" }, title),
+      el("h4", { class: "mb-2.5 text-2xs font-bold tracking-[0.08em] text-ink-3 uppercase" }, title),
       el("ul", { class: "m-0 grid list-none gap-1.5 p-0" }, ...links.map((link) => el("li", {}, link)))
     );
 
@@ -280,7 +282,7 @@ function footer() {
         el(
           "div",
           { class: "grid gap-1.5" },
-          el("a", { class: "inline-flex items-center gap-[9px] text-md font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
+          el("a", { class: "inline-flex min-h-11 items-center gap-[9px] text-md font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
             el("img", { class: "block size-[34px] rounded-[11px] shadow-[0_0_0_1px_var(--orbit)]", src: "./icon.png", alt: "", width: "34", height: "34" }), "mevebu"),
           el("p", { class: "m-0 max-w-[30ch] text-sm leading-[1.5] text-ink-3" }, "Small tools that run in your browser. No accounts, no uploads, no tracking.")
         ),
@@ -315,7 +317,7 @@ function footer() {
           { class: "m-0 flex items-center gap-2" },
           el("button", {
             class:
-              "inline-flex min-h-7 cursor-pointer items-center gap-1.5 rounded-full border border-orbit bg-transparent px-2.5 py-[3px] font-sans text-2xs tabular-nums text-ink-3 transition-colors duration-150 hover:border-orbit-hard hover:text-ink data-[new]:border-jade data-[new]:bg-jade-soft data-[new]:font-semibold data-[new]:text-jade data-[new]:hover:bg-jade data-[new]:hover:text-on-jade",
+              "inline-flex min-h-7 cursor-pointer items-center gap-1.5 rounded-full border border-orbit bg-transparent px-2.5 py-[3px] font-sans text-2xs tabular-nums text-ink-3 transition-colors duration-150 hover:border-orbit-hard hover:text-ink data-[new]:border-jade data-[new]:bg-jade-soft data-[new]:font-semibold data-[new]:text-jade data-[new]:hover:bg-jade data-[new]:hover:text-on-jade max-[45rem]:min-h-11",
             id: "version",
             type: "button",
             title: "Check for updates",

package/mevebu/app/tailwind.css

@@ -1558,6 +1558,9 @@
     .max-\[45rem\]\:inline-flex {
       display: inline-flex;
     }
+    .max-\[45rem\]\:min-h-11 {
+      min-height: calc(var(--spacing) * 11);
+    }
     .max-\[45rem\]\:\[grid-template-columns\:minmax\(0\,1fr\)_62px\] {
       grid-template-columns: minmax(0,1fr) 62px;
     }
@@ -1579,6 +1582,18 @@
     }
   }
   @media (width >= 60rem) {
+    .min-\[60rem\]\:sticky {
+      position: sticky;
+    }
+    .min-\[60rem\]\:top-\[var\(--stick\)\] {
+      top: var(--stick);
+    }
+    .min-\[60rem\]\:-mx-1 {
+      margin-inline: calc(var(--spacing) * -1);
+    }
+    .min-\[60rem\]\:max-h-\[var\(--stick-max\)\] {
+      max-height: var(--stick-max);
+    }
     .min-\[60rem\]\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
       grid-template-columns: minmax(0,1fr) auto;
     }
@@ -1588,6 +1603,15 @@
     .min-\[60rem\]\:gap-6 {
       gap: calc(var(--spacing) * 6);
     }
+    .min-\[60rem\]\:overflow-y-auto {
+      overflow-y: auto;
+    }
+    .min-\[60rem\]\:overscroll-contain {
+      overscroll-behavior: contain;
+    }
+    .min-\[60rem\]\:px-1 {
+      padding-inline: var(--spacing);
+    }
   }
   @media (width >= 64rem) {
     .lg\:grid-cols-3 {
@@ -1955,6 +1979,8 @@
   --ctl: 40px;
   --card-pad: clamp(20px, 3vw, 32px);
   --band-pad: clamp(12px, 2vw, 16px);
+  --stick: calc(var(--bar) + 1rem);
+  --stick-max: calc(100dvh - var(--bar) - 3rem);
   --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   --t: 150ms;

package/mevebu/app/tailwind.src.css

@@ -75,6 +75,12 @@
   --card-pad: clamp(20px, 3vw, 32px);
   --band-pad: clamp(12px, 2vw, 16px);
 
+  /* Where a short controls column pins while a long result scrolls past it:
+     just under the header, and never taller than the room left below it, so the
+     bottom of a long form stays reachable instead of being pushed off screen. */
+  --stick: calc(var(--bar) + 1rem);
+  --stick-max: calc(100dvh - var(--bar) - 3rem);
+
   --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 

package/mevebu/libs/js/core.js

@@ -280,7 +280,7 @@ export function openPalette({ onPick } = {}) {
     autocomplete: "off",
     spellcheck: "false",
   });
-  const list = el("ul", { class: "m-0 mt-1.5 max-h-[min(60vh,360px)] overflow-y-auto px-2 pb-2", role: "listbox" });
+  const list = el("ul", { class: "mt-1.5 max-h-[min(60vh,360px)] overflow-y-auto px-2 pb-2", role: "listbox" });
   const count = el("p", { class: "m-0 px-[18px] pt-2 text-2xs text-ink-3" });
   const footer = el(
     "p",
@@ -415,12 +415,21 @@ export function debounce(fn, ms = 120) {
 
 // ---------- bench layout ----------
 
-/** Two column bench: controls on the left, the result on the right. */
+/** Two column bench: controls on the left, the result on the right.
+ *  Above 60rem the controls pin under the header, so a long result can be read
+ *  and scrolled without the controls leaving the screen. The cap keeps the
+ *  bottom of a tall form reachable instead of pinning it out of view.
+ *  The negative margin plus the matching padding give the focus halo room to
+ *  paint: a scroll container clips its children's ink, and the fields sit flush
+ *  with the column edges, so without the 4px gutter every ring loses its sides.
+ *  The pair cancels out, so the fields keep their width and stay on the anchor line. */
 export function bench(side, main) {
+  const sideColumn =
+    "min-w-0 min-[60rem]:sticky min-[60rem]:top-[var(--stick)] min-[60rem]:max-h-[var(--stick-max)] min-[60rem]:overflow-y-auto min-[60rem]:overscroll-contain min-[60rem]:-mx-1 min-[60rem]:px-1";
   return el(
     "div",
     { class: "grid items-start gap-5 min-[60rem]:grid-cols-[minmax(0,21rem)_minmax(0,1fr)] min-[60rem]:gap-6" },
-    el("div", { class: "min-w-0" }, side),
+    el("div", { class: sideColumn }, side),
     el("div", { class: "min-w-0" }, main)
   );
 }
@@ -733,7 +742,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.4.0";
+export const VERSION = "1.4.2";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",