From 2f0af8e241226fef74a7cd42ed649bd9159ef644 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Sun, 23 Aug 2026 20:42:22 +0800
Subject: [PATCH 1/4] Fix(ui): stop Safari shifting the select trigger's value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shadcn default geometry (h-9 + py-2 + text-sm) leaves an 18px content
box for a 20px line, so the button content overflows by 2px. Safari
re-centers that overflow only when the content changes, which nudged the
selected label up ~2px on every pick; Chrome stayed put. py-1 gives the
line room, and the value span drops -webkit-box line-clamp for real
flexbox so its vertical position no longer depends on legacy layout.

SelectValue keeps ellipsis for plain text by wrapping the default label in
a truncating span — as a flex child, a bare text node can't truncate.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/AGENTS.md                              | 6 ++++--
 frontend/components/ui/select/SelectTrigger.vue | 2 +-
 frontend/components/ui/select/SelectValue.vue   | 8 ++++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md
index b0b9f8890..f7d9a184a 100644
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -97,8 +97,10 @@ first-party tunnel `/api/monitoring` to beat ad blockers.
 **shadcn-vue first.** Check `components/ui/`, then the shadcn-vue docs for
 something to copy in; hand-rolled Tailwind only when neither fits. Keep when
 syncing upstream: `Spinner` + `ToolLoadingSkeleton` (project-specific),
-`toggle` / `toggle-group`'s deliberate `primary` pressed pair, and the
-overlay roots' shortcut suspension.
+`toggle` / `toggle-group`'s deliberate `primary` pressed pair, the overlay
+roots' shortcut suspension, and `select`'s trigger geometry — `py-1` plus a
+flex (not `-webkit-box` line-clamp) value span, because Safari shifts button
+content up ~2px once it overflows the trigger's content box.
 
 ### Design tokens
 
diff --git a/frontend/components/ui/select/SelectTrigger.vue b/frontend/components/ui/select/SelectTrigger.vue
index f8db2dd0e..2765d2413 100644
--- a/frontend/components/ui/select/SelectTrigger.vue
+++ b/frontend/components/ui/select/SelectTrigger.vue
@@ -8,7 +8,7 @@ defineProps({ class: { type: [String, Array, Object], default: undefined } });
 
 <template>
   <SelectTrigger
-    :class="cn('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', $props.class)"
+    :class="cn('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:flex [&>span]:min-w-0 [&>span]:items-center [&>span]:overflow-hidden [&>span]:whitespace-nowrap', $props.class)"
   >
     <slot />
     <SelectIcon as-child>
diff --git a/frontend/components/ui/select/SelectValue.vue b/frontend/components/ui/select/SelectValue.vue
index b2db42511..35501ced6 100644
--- a/frontend/components/ui/select/SelectValue.vue
+++ b/frontend/components/ui/select/SelectValue.vue
@@ -5,7 +5,11 @@ defineProps({ placeholder: { type: String, default: undefined } });
 </script>
 
 <template>
-  <SelectValue :placeholder="placeholder">
-    <slot />
+  <!-- The trigger lays this span out as a flex row, so the default text needs
+       an element of its own to truncate against. -->
+  <SelectValue v-slot="{ selectedLabel, modelValue }" :placeholder="placeholder">
+    <slot :selected-label="selectedLabel" :model-value="modelValue">
+      <span class="truncate">{{ selectedLabel.length ? selectedLabel.join(', ') : placeholder }}</span>
+    </slot>
   </SelectValue>
 </template>

From 40ccec123ce69334b3f1e99754150f2df8aa8ccb Mon Sep 17 00:00:00 2001
From: Fadhlan <fadhlanzap@gmail.com>
Date: Sun, 23 Aug 2026 20:15:29 +0700
Subject: [PATCH 2/4] Fix(ui): keep the connectivity status label inside its
 card

On phones the connectivity cards sit two per row, and the "Awaiting Test"
label in the longer locales (pt-BR 16 chars, fr 18) pushed past the card
edge: the span carried `whitespace-nowrap` with nothing to clip it, and
`font-mono` cost roughly 20% extra width for what is prose, not data.

The status row now drops one size on phones only (`text-sm md:text-base`),
the label loses `font-mono` and gains `truncate` with a `:title` so the
full string stays reachable, and `shrink-0` on the latency value makes the
label give way first. The label stays on a single line, so a card keeps
its height when a run finishes and the page does not jitter on refresh.

Closes #429
---
 frontend/components/ConnectivityTest.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/components/ConnectivityTest.vue b/frontend/components/ConnectivityTest.vue
index 38328a06c..4b3f47951 100644
--- a/frontend/components/ConnectivityTest.vue
+++ b/frontend/components/ConnectivityTest.vue
@@ -51,20 +51,20 @@
             <span class="text-base font-medium truncate">{{ test.name }}</span>
           </div>
           <!-- Status + ms. Multi mode pins these to the best round (see checkConnectivityHandler). -->
-          <div class="flex items-center justify-between gap-2">
-            <span class="flex items-center gap-1.5 text-base min-w-0">
+          <div class="flex items-center justify-between gap-2 text-sm md:text-base">
+            <span class="flex items-center gap-1.5 min-w-0">
               <span v-if="toneOf(test) === 'wait'" class="relative flex shrink-0">
                 <span class="absolute inline-flex size-2 rounded-full bg-info opacity-75 animate-ping"></span>
                 <span class="relative inline-flex size-2 rounded-full" :class="dotClass(toneOf(test))"></span>
               </span>
               <component v-else-if="statusFaceIcon(test)" :is="statusFaceIcon(test)" class="size-4 shrink-0"
                 :class="textClass(toneOf(test))" />
-              <span :class="textClass(toneOf(test))" class="font-mono whitespace-nowrap min-w-0">{{ test.status
+              <span :class="textClass(toneOf(test))" class="min-w-0 truncate" :title="test.status">{{ test.status
                 }}</span>
             </span>
-            <span v-if="test.time !== 0" class="text-base font-mono tabular-nums text-muted-foreground"
+            <span v-if="test.time !== 0" class="shrink-0 font-mono tabular-nums text-muted-foreground"
               :title="t('connectivity.minTestTime') + test.mintime + ' ms'">
-              {{ test.time }}<span class="ml-0.5 text-sm">ms</span>
+              {{ test.time }}<span class="ml-0.5 text-xs md:text-sm">ms</span>
             </span>
           </div>
           <!-- Multi-test per-round latency bars, all on one absolute scale

From b56b748df62f2b946bdc2a6ec5b93602e138190a Mon Sep 17 00:00:00 2001
From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com>
Date: Sun, 23 Aug 2026 19:45:15 +0530
Subject: [PATCH 3/4] fix(nav): prevent truncation of long tool names in mobile
 drawer and desktop dropdown (#430)

Widen the mobile navigation drawer from w-72 to w-80 and the desktop dropdown grid from min-w-[24rem] to min-w-[28rem]. Replace truncate with leading-snug on tool item buttons so long translated tool names (such as in Portuguese and French) wrap neatly instead of being clipped with an ellipsis.

Signed-off-by: Vedant Madane <6527493+VedantMadane@users.noreply.github.com>
---
 frontend/components/Nav.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/components/Nav.vue b/frontend/components/Nav.vue
index 1e43dbe43..cfaef073b 100644
--- a/frontend/components/Nav.vue
+++ b/frontend/components/Nav.vue
@@ -45,12 +45,12 @@
                 </NavigationMenuTrigger>
                 <NavigationMenuContent class="z-50">
                   <!-- Two-column grid on PC -->
-                  <ul class="relative grid grid-cols-2 gap-x-4 gap-y-0.5 min-w-[24rem]">
+                  <ul class="relative grid grid-cols-2 gap-x-4 gap-y-0.5 min-w-[28rem]">
                     <span aria-hidden="true"
                       class="pointer-events-none absolute inset-y-1 left-1/2 w-px -translate-x-1/2 bg-border"></span>
                     <li v-for="tool in advancedTools" :key="tool.slug">
                       <NavigationMenuLink as-child class="cursor-pointer">
-                        <button type="button" class="w-full truncate text-left" @click="openTool(tool.slug)">
+                        <button type="button" class="w-full text-left leading-snug" @click="openTool(tool.slug)">
                           {{ t(tool.titleKey) }}
                         </button>
                       </NavigationMenuLink>
@@ -203,7 +203,7 @@
     <!-- Mobile navigation drawer. Flex column so the link list scrolls instead
          of clipping on short screens when Advanced Tools is expanded. -->
     <Sheet v-if="isMobile" :open="isNavMenuOpen" @update:open="onNavMenuChange">
-      <SheetContent side="left" class="w-72 p-0 flex flex-col gap-0" :title="t('nav.Navigation')">
+      <SheetContent side="left" class="w-80 p-0 flex flex-col gap-0" :title="t('nav.Navigation')">
         <div class="flex shrink-0 items-center justify-between border-b px-4 py-3">
           <h5 class="m-0 text-base font-semibold">{{ t('nav.Navigation') }}</h5>
           <SheetClose />
@@ -224,7 +224,7 @@
               <CollapsibleContent>
                 <div class="my-0.5 ml-3 flex flex-col gap-0.5 border-l pl-3">
                   <button v-for="tool in advancedTools" :key="tool.slug" type="button"
-                    class="block w-full truncate rounded-md px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+                    class="block w-full rounded-md px-3 py-1.5 text-left text-sm leading-snug text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
                     @click="openTool(tool.slug)">
                     {{ t(tool.titleKey) }}
                   </button>

From e9808e31dbca7fe74e7f839f3ff29971e317ee0b Mon Sep 17 00:00:00 2001
From: taljeon <taljeon@users.noreply.github.com>
Date: Mon, 24 Aug 2026 00:52:40 +0900
Subject: [PATCH 4/4] docs: require Node.js 24 for contributor setup

---
 CONTRIBUTING.md | 2 +-
 package.json    | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a1a9f6c26..67b38b2c6 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,7 +12,7 @@ New here? Look for issues labeled
 
 1. **Fork** the repo and create your branch **from `dev`** (never `main` — `main` only
    receives release merges from `dev`).
-2. **Set up:** Node.js 20+ (CI runs on Node 24) and pnpm. The pnpm version is pinned
+2. **Set up:** Node.js 24+ (same as CI) and pnpm. The pnpm version is pinned
    via the `packageManager` field, so the easiest path is:
 
    ```bash
diff --git a/package.json b/package.json
index 21199480b..64a1a57bf 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
   "version": "7.4.0",
   "type": "module",
   "packageManager": "pnpm@11.22.0",
+  "engines": {
+    "node": ">=24"
+  },
   "scripts": {
     "dev": "concurrently \"vite\" \"nodemon --import ./sentry-instrument.js backend-server.js\"",
     "build": "vite build",