From c31c982af578b245ba9c56ee17d8d330e76856cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= <infogabrielevigano@gmail.com>
Date: Mon, 12 Oct 2026 18:32:25 +0200
Subject: [PATCH 1/3] fix(mobile): tighten toolbars, stacked cards and section
 navigation

On phones a segmented filter shares its row with the filter button instead of wrapping alone, unset values drop out of stacked cards, copyable IDs keep their touch target without the extra line height, and the current section pill scrolls into view. Overview numbers share a baseline with their sections two per row, FAQ questions wrap, category pills run to the screen edges, project links truncate, and the user header stacks its meta without a dangling separator. Chip lists size their fit from the text the chip actually shows.
---
 docs/design.md                                | 20 +++++++++++--------
 src/components/primitives/chip-overflow.tsx   | 17 ++++++++++++----
 src/components/primitives/copyable-text.tsx   |  5 +++--
 src/components/primitives/data-table.tsx      |  5 +++--
 .../primitives/group-label-badges.tsx         |  3 ++-
 src/components/primitives/label-chip.tsx      |  7 ++++++-
 src/components/primitives/unset.tsx           |  2 +-
 src/components/shell/page-bar.tsx             | 13 +++++++++---
 src/components/shell/panel.tsx                | 16 +++++++++++++--
 src/features/faqs/faq-items.tsx               |  5 +++--
 src/features/faqs/faqs-page.tsx               |  2 +-
 src/features/projects/project-card.tsx        | 11 ++++++----
 src/features/telegram/user-detail/profile.tsx |  7 +++++--
 13 files changed, 80 insertions(+), 33 deletions(-)

diff --git a/docs/design.md b/docs/design.md
index b82ddef3..722cd2d1 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -101,7 +101,8 @@ content in place. Between 760px and 1439px, the content follows the panel as it
 
 **Page header.** Scrolls with the page (the page, not the document, scrolls: the column below the top bar is the
 scroll container). `h1` 24px (22px on mobile) with the context line in 14px muted, actions on the right at 40px; below
-760px the actions take the full width under the title. The toolbar row follows 20px below. `/` focuses the page
+760px the actions take the full width under the title. The toolbar row follows 20px below. Below 760px the search takes its own row and a segmented filter fills the rest of the row it shares (scrolling
+sideways when its options don't fit); the `/` hint is hidden. `/` focuses the page
 search from anywhere; `Esc` clears it. A service with a single section (WhatsApp) shows its icon in a 44px tile next to
 the `h1`.
 
@@ -113,7 +114,7 @@ the `h1`.
 
 **Small screens** (below 760px). Rail and panel leave the layout. A 56px top bar holds the logo (Overview), the
 service title ("PoliNetwork Admin" on Overview), Search, the theme toggle and the avatar; the service's sections follow
-as horizontally scrolling pills that scroll away with the page; a 64px bottom nav lists the five services (current one
+as horizontally scrolling pills that scroll away with the page, scrolled so the current one is in view; a 64px bottom nav lists the five services (current one
 accent with a top bar, Reports with the open-reports dot). Section pills and bottom nav are the only navigation; there
 is no sheet.
 
@@ -142,7 +143,9 @@ does not move when data arrives.
 **List.** A `DataTable` with search and filters in the toolbar. One row height (52px), no dense mode. Columns declare a
 priority; from 760px the lowest hide first when the table surface narrows, never the first or the actions column.
 Below 760px every row is a stacked card: the first column on its own line, the others inline as 12px meta
-(`mobile: "full"` gives a column its own line, `"hidden"` drops it), the actions on their own line. Give columns
+(`mobile: "full"` gives a column its own line, `"hidden"` drops it), the actions on their own line. An unset value
+(`Unset`) is left out of the card rather than shown as a lone dash, and copyable values keep a 36px touch target
+without making their line taller. Give columns
 whose content length varies a `width` (the table switches to fixed layout and the title column takes the rest), so
 nothing jumps across search, filters and paging. Pagination shows in the table footer once rows exceed the smallest page
 size (20; options 20/50/100). The page resets to page 1 itself when search, filters or sort change (`DataTable`
@@ -174,8 +177,9 @@ further apart, without a red border.
 **Overview.** A 52px search that opens the command palette; a hero card with the Telegram users total, its growth over
 the selected range and a TanStack Charts line (3M per day, 1Y per week, All per month; one 2px accent line, a light
 grid, month labels, a dashed hover guide and a tooltip with the date, total and growth), and Telegram groups, Open
-reports and Active grants as links on its right (a row under it on mobile); then "Areas": one card per service whose
-whole surface leads where the rail icon does, with each section as a 44px button.
+reports and Active grants as links on its right (a row under it on mobile, numbers on one baseline and without the "To
+review" flag); then "Areas": one card per service whose whole surface leads where the rail icon does, with each section
+as a 44px button (two per row on mobile).
 
 **States.** While a route loads, its `pendingComponent` renders `PageBar`, `PageContent` and the template's skeleton
 (`TableSkeleton`, `CardsSkeleton`, `RecordSkeleton`, `SettingsListSkeleton`, labelled "Loading {things}…"), so nothing
@@ -413,12 +417,12 @@ Rules that the templates above don't imply.
 - **Projects**: one column at every width, because card order is the order on the website; the whole card drags to
   reorder (pointer after 5px, so its buttons and links still click; touch after a 250ms press; keyboard with
   Space/Enter on the focused card). A grip marks the card's left edge from 760px and its border takes the hover line.
-  A failed reorder reverts. Mobile project links wrap. Segments replace `Count`.
+  A failed reorder reverts. Project links truncate at every width (the hint shows the full URL). Segments replace `Count`.
 - **Associations**: 17px semibold titles, IT/EN tags in a left column beside the description, and a divided footer
   with the public-link count left and Manage links right; edit/delete stay in the header. Links are edited in their
   own dialog, not inline.
-- **FAQs**: the categories are a list beside the questions (icon, Italian title, count; pills below 1100px) ending in a
-  dashed "Add category"; the selected category's header holds its edit and delete actions and the question search.
+- **FAQs**: the categories are a list beside the questions (icon, Italian title, count; pills below 1100px, running to
+  the screen edges on phones) ending in a dashed "Add category"; on phones questions wrap up to three lines; the selected category's header holds its edit and delete actions and the question search.
 - **Freshman guide**: the latest edition is a card (version, "Latest", publication date, Download PDF) above the "All
   editions" table. Mobile editions remain compact single rows: version, date, PDF and delete.
 - **Categories**: each fixed root is a card that opens it, with its first five sub-categories as chips carrying their
diff --git a/src/components/primitives/chip-overflow.tsx b/src/components/primitives/chip-overflow.tsx
index b2084aa3..f4de4ee0 100644
--- a/src/components/primitives/chip-overflow.tsx
+++ b/src/components/primitives/chip-overflow.tsx
@@ -15,6 +15,8 @@ type ChipOverflowProps<T> = Omit<React.ComponentProps<"div">, "children"> & {
   renderItem: (item: T) => ReactNode
   /** The item's full name in the overflow popover and its accessible label. */
   itemLabel: (item: T) => string
+  /** The text the chip shows, when shorter than `itemLabel`; sizes the fit. */
+  chipText?: (item: T) => string
 }
 
 /** Estimated chip geometry (12px DM Sans): padding and dot, average glyph width, the chip's max width. */
@@ -46,7 +48,15 @@ function fittingCount(labels: string[], max: number, width: number) {
  * truncating a chip to a stub, a "+n" `CountBadge` lists the remaining items in a hoverable popover that also opens
  * by click or keyboard.
  */
-export function ChipOverflow<T>({ items, max = 2, renderItem, itemLabel, className, ...props }: ChipOverflowProps<T>) {
+export function ChipOverflow<T>({
+  items,
+  max = 2,
+  renderItem,
+  itemLabel,
+  chipText = itemLabel,
+  className,
+  ...props
+}: ChipOverflowProps<T>) {
   const ref = useRef<HTMLDivElement>(null)
   const [width, setWidth] = useState<number | null>(null)
   useLayoutEffect(() => {
@@ -58,10 +68,9 @@ export function ChipOverflow<T>({ items, max = 2, renderItem, itemLabel, classNa
     observer.observe(element)
     return () => observer.disconnect()
   }, [])
-  const labels = items.map(itemLabel)
-  const count = width === null ? max : Math.min(max, fittingCount(labels, max, width))
+  const count = width === null ? max : Math.min(max, fittingCount(items.map(chipText), max, width))
   const shown = items.slice(0, count)
-  const rest = labels.slice(count)
+  const rest = items.slice(count).map(itemLabel)
   return (
     <div
       ref={ref}
diff --git a/src/components/primitives/copyable-text.tsx b/src/components/primitives/copyable-text.tsx
index 89de1e44..b9918513 100644
--- a/src/components/primitives/copyable-text.tsx
+++ b/src/components/primitives/copyable-text.tsx
@@ -32,11 +32,12 @@ export function CopyableText({ value, what, children, className }: CopyableTextP
       aria-label={`Copy ${what} ${value}`}
       onClick={() => void copy()}
       className={cn(
-        "relative block max-w-full max-shell:min-h-9 max-shell:min-w-9 cursor-pointer truncate rounded-(--pn-r-1) text-left",
+        // The ::after pad gives touch a 36px target without making the line taller in stacked cards.
+        "relative block max-w-full cursor-pointer rounded-(--pn-r-1) text-left max-shell:after:absolute max-shell:after:-inset-y-2 max-shell:after:-inset-x-1 max-shell:after:min-w-9",
         className
       )}
     >
-      {children ?? value}
+      <span className="block truncate">{children ?? value}</span>
     </button>
   )
 }
diff --git a/src/components/primitives/data-table.tsx b/src/components/primitives/data-table.tsx
index 18307c97..0b1286a7 100644
--- a/src/components/primitives/data-table.tsx
+++ b/src/components/primitives/data-table.tsx
@@ -118,8 +118,9 @@ const mobileCellRole = {
   main: "max-shell:basis-full max-shell:whitespace-normal",
   inline: "max-shell:min-w-0 max-shell:flex-1 max-shell:text-left max-shell:text-[14px] max-shell:font-medium",
   end: "max-shell:ml-auto max-shell:shrink-0",
-  text: "max-shell:basis-full max-shell:min-w-0 max-shell:text-[14px] max-shell:whitespace-normal max-shell:text-(--pn-fg)",
-  meta: "max-shell:min-w-0 max-shell:text-left max-shell:text-xs max-shell:text-(--pn-fg-muted)",
+  text: "max-shell:basis-full max-shell:min-w-0 max-shell:text-[14px] max-shell:whitespace-normal max-shell:text-(--pn-fg) max-shell:[&:has(>[data-unset])]:hidden",
+  // An unset value (`Unset`, "—") is dropped from the card instead of showing a lone dash.
+  meta: "max-shell:min-w-0 max-shell:text-left max-shell:text-xs max-shell:text-(--pn-fg-muted) max-shell:[&:has(>[data-unset])]:hidden",
   full: "max-shell:basis-full max-shell:min-w-0",
   hidden: "max-shell:hidden",
 }
diff --git a/src/components/primitives/group-label-badges.tsx b/src/components/primitives/group-label-badges.tsx
index 01d9a7ad..0313d6c7 100644
--- a/src/components/primitives/group-label-badges.tsx
+++ b/src/components/primitives/group-label-badges.tsx
@@ -4,7 +4,7 @@ import { isCategoryLabel } from "@/features/group-labels/label-tree"
 import type { GroupLabel } from "@/features/group-labels/types"
 
 import { ChipOverflow } from "./chip-overflow"
-import { LabelChip } from "./label-chip"
+import { LabelChip, labelChipText } from "./label-chip"
 import { labelDisplayName } from "./label-name"
 import { Unset } from "./unset"
 
@@ -34,6 +34,7 @@ export function GroupLabelBadges({ labels, max = 2, hrefForLabel, renderLink, cl
       items={ordered}
       max={max}
       itemLabel={(label) => labelDisplayName(label.label)}
+      chipText={(label) => labelChipText(label.label)}
       renderItem={(label) => (
         <LabelChip
           key={label.label}
diff --git a/src/components/primitives/label-chip.tsx b/src/components/primitives/label-chip.tsx
index 977c8d73..91b17f3b 100644
--- a/src/components/primitives/label-chip.tsx
+++ b/src/components/primitives/label-chip.tsx
@@ -38,7 +38,7 @@ type LabelChipProps = {
 export function LabelChip({ label, href, render, className }: LabelChipProps) {
   const link = render ?? (href === undefined ? undefined : <a href={href} />)
   const title = labelDisplayName(label.label)
-  const text = isCategoryLabel(label.label) ? formatLabelCompact(label.label) : title
+  const text = labelChipText(label.label)
   return (
     <Hint label={title} overflowOnly={text === title}>
       <Chip
@@ -54,3 +54,8 @@ export function LabelChip({ label, href, render, className }: LabelChipProps) {
     </Hint>
   )
 }
+
+/** The text a `LabelChip` shows: categories as their last two segments, other labels by display name. */
+export function labelChipText(label: string) {
+  return isCategoryLabel(label) ? formatLabelCompact(label) : labelDisplayName(label)
+}
diff --git a/src/components/primitives/unset.tsx b/src/components/primitives/unset.tsx
index f15689fe..8c099f63 100644
--- a/src/components/primitives/unset.tsx
+++ b/src/components/primitives/unset.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils"
 /** The em dash that stands in for every absent value. */
 export function Unset({ className }: { className?: string }) {
   return (
-    <span role="img" aria-label="Not set" className={cn("text-(--pn-fg-muted)", className)}>
+    <span role="img" aria-label="Not set" data-unset="" className={cn("text-(--pn-fg-muted)", className)}>
       —
     </span>
   )
diff --git a/src/components/shell/page-bar.tsx b/src/components/shell/page-bar.tsx
index ce7c2551..6ff50876 100644
--- a/src/components/shell/page-bar.tsx
+++ b/src/components/shell/page-bar.tsx
@@ -306,7 +306,7 @@ export function SearchField({ value, onChange, placeholder, label, inputRef, cla
         autoComplete="off"
         spellCheck={false}
         data-page-search=""
-        className="h-10 w-full rounded-[9px] border border-(--pn-line-strong) bg-(--pn-surface) pr-10 pl-10 text-[14px] text-(--pn-fg) transition-[border-color] duration-120 placeholder:text-(--pn-fg-subtle) hover:border-(--pn-hover-line) max-shell:text-base [&::-webkit-search-cancel-button]:appearance-none"
+        className="h-10 w-full rounded-[9px] border border-(--pn-line-strong) bg-(--pn-surface) pr-10 pl-10 text-[14px] text-(--pn-fg) transition-[border-color] duration-120 text-ellipsis placeholder:text-(--pn-fg-subtle) hover:border-(--pn-hover-line) max-shell:text-base [&::-webkit-search-cancel-button]:appearance-none"
       />
       {value !== "" ? (
         <button
@@ -320,7 +320,7 @@ export function SearchField({ value, onChange, placeholder, label, inputRef, cla
       ) : (
         <kbd
           aria-hidden
-          className="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 rounded-[5px] border border-(--pn-line-strong) bg-(--pn-surface-raised) px-1.5 font-mono text-[11px] leading-4 text-(--pn-fg-muted) group-focus-within/search:hidden pointer-coarse:hidden"
+          className="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 rounded-[5px] border border-(--pn-line-strong) bg-(--pn-surface-raised) px-1.5 font-mono text-[11px] leading-4 text-(--pn-fg-muted) group-focus-within/search:hidden pointer-coarse:hidden max-shell:hidden"
         >
           /
         </kbd>
@@ -345,7 +345,14 @@ export type ToolbarProps = {
  */
 export function Toolbar({ lead, search, filters, count }: ToolbarProps) {
   return (
-    <div className="flex w-full min-w-0 flex-wrap items-center gap-2.5 max-shell:[&_[role=group]]:max-w-full max-shell:[&_[role=group]]:overflow-x-auto">
+    <div
+      className={cn(
+        "flex w-full min-w-0 flex-wrap items-center gap-2.5 max-shell:gap-2",
+        // Below 760px a segmented control takes the rest of its row (basis 0, so it never wraps alone), its segments
+        // share that width, and it scrolls sideways rather than overflow.
+        "max-shell:[&_[role=group]]:max-w-full max-shell:[&_[role=group]]:min-w-0 max-shell:[&_[role=group]]:flex-1 max-shell:[&_[role=group]]:basis-0 max-shell:[&_[role=group]]:overflow-x-auto max-shell:[&_[role=group]]:[scrollbar-width:none] max-shell:[&_[role=group]>*]:flex-[1_0_auto] max-shell:[&_[role=group]>*]:gap-1 max-shell:[&_[role=group]>*]:px-2"
+      )}
+    >
       {lead}
       {search ? (
         <SearchField
diff --git a/src/components/shell/panel.tsx b/src/components/shell/panel.tsx
index 214e2049..57b860c2 100644
--- a/src/components/shell/panel.tsx
+++ b/src/components/shell/panel.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router"
-import { type KeyboardEvent, Suspense, use, useDeferredValue } from "react"
+import { type KeyboardEvent, Suspense, use, useDeferredValue, useLayoutEffect, useRef } from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -130,12 +130,24 @@ export function Panel({ service, match, pendingReports, className }: PanelProps)
 
 /** Below 760px: the service's sections as a horizontally scrolling row of pills under the top bar. */
 export function SectionPills({ service, match, pendingReports, className }: PanelProps) {
+  const ref = useRef<HTMLElement>(null)
+  // Keep the current pill in view: a section past the screen edge would otherwise look unselected.
+  useLayoutEffect(() => {
+    const nav = ref.current
+    const current = nav?.querySelector<HTMLElement>("[aria-current=page], [data-ancestor]")
+    if (!nav || !current) return
+    const start = current.offsetLeft - 16
+    const end = current.offsetLeft + current.offsetWidth + 16 - nav.clientWidth
+    if (nav.scrollLeft > start) nav.scrollLeft = start
+    else if (nav.scrollLeft < end) nav.scrollLeft = end
+  }, [match.kind])
   return (
     <nav
+      ref={ref}
       aria-label={`${service.title} sections`}
       onKeyDown={onSectionListKeyDown}
       className={cn(
-        "flex gap-1.5 overflow-x-auto border-b border-(--pn-line) bg-(--pn-panel) px-4 py-2.5 [scrollbar-width:none]",
+        "relative flex gap-1.5 overflow-x-auto border-b border-(--pn-line) bg-(--pn-panel) px-4 py-2.5 [scrollbar-width:none]",
         className
       )}
     >
diff --git a/src/features/faqs/faq-items.tsx b/src/features/faqs/faq-items.tsx
index 4b830876..079f86ae 100644
--- a/src/features/faqs/faq-items.tsx
+++ b/src/features/faqs/faq-items.tsx
@@ -44,14 +44,15 @@ export function toFaqInput(faq: FAQItem): FaqInput {
 
 function LanguageLine({ lang, children, muted }: { lang: "IT" | "EN"; children: string; muted?: boolean }) {
   return (
-    <span className="flex min-w-0 items-center gap-2">
+    <span className="flex min-w-0 items-center gap-2 max-shell:items-start">
       <Chip size="tiny" className={cn("w-[26px] justify-center", muted && "text-(--pn-fg-muted)")}>
         {lang}
       </Chip>
       <Hint overflowOnly label={children}>
         <span
           className={cn(
-            "truncate text-[13px] leading-5",
+            // Phones wrap the question (it is the row's content) instead of cutting it to a few words.
+            "truncate text-[13px] leading-5 max-shell:line-clamp-3 max-shell:whitespace-normal",
             muted ? "text-(--pn-fg-muted)" : "font-medium text-(--pn-fg)"
           )}
         >
diff --git a/src/features/faqs/faqs-page.tsx b/src/features/faqs/faqs-page.tsx
index 7afc593e..c40447c2 100644
--- a/src/features/faqs/faqs-page.tsx
+++ b/src/features/faqs/faqs-page.tsx
@@ -351,7 +351,7 @@ function CategoryList({ categories, currentId, onSelect, onAdd }: CategoryListPr
   return (
     <nav
       aria-label="FAQ categories"
-      className="flex min-w-0 gap-1.5 overflow-x-auto [scrollbar-width:none] min-[1100px]:flex-col min-[1100px]:gap-0.5 min-[1100px]:rounded-(--pn-r-5) min-[1100px]:border min-[1100px]:border-(--pn-line) min-[1100px]:bg-(--pn-surface) min-[1100px]:p-2"
+      className="flex min-w-0 gap-1.5 overflow-x-auto [scrollbar-width:none] max-shell:-mx-4 max-shell:px-4 min-[1100px]:flex-col min-[1100px]:gap-0.5 min-[1100px]:rounded-(--pn-r-5) min-[1100px]:border min-[1100px]:border-(--pn-line) min-[1100px]:bg-(--pn-surface) min-[1100px]:p-2"
     >
       <p className="px-3 pt-2 pb-1.5 text-xs font-medium text-(--pn-fg-muted) max-[1099px]:hidden">Categories</p>
       {categories.map((item) => {
diff --git a/src/features/projects/project-card.tsx b/src/features/projects/project-card.tsx
index fe068c76..606519c5 100644
--- a/src/features/projects/project-card.tsx
+++ b/src/features/projects/project-card.tsx
@@ -118,7 +118,12 @@ export function ProjectCard({
 
   const viewHeader = (
     <div className="flex min-w-0 items-center gap-3.5">
-      <WebLogo src={project.logo} name={project.title} fallback="PR" className="size-12 rounded-(--pn-r-4)" />
+      <WebLogo
+        src={project.logo}
+        name={project.title}
+        fallback="PR"
+        className="size-12 rounded-(--pn-r-4) max-shell:size-10"
+      />
       <div className="flex min-w-0 flex-col">
         <Hint overflowOnly label={project.title}>
           <h3 className="truncate text-[16px] leading-6 font-semibold text-(--pn-fg)">{project.title}</h3>
@@ -132,9 +137,7 @@ export function ProjectCard({
 
               className="inline-flex max-w-full items-center gap-1 text-[13px] leading-5 text-(--pn-accent) transition-[color] duration-120 hover:text-(--pn-accent-hover) hover:underline"
             >
-              <span className="truncate max-shell:whitespace-normal max-shell:break-all">
-                {project.link.replace(/^https?:\/\//, "")}
-              </span>
+              <span className="truncate">{project.link.replace(/^https?:\/\//, "")}</span>
               <ExternalLink aria-hidden className="size-3 shrink-0" />
             </a>
           </Hint>
diff --git a/src/features/telegram/user-detail/profile.tsx b/src/features/telegram/user-detail/profile.tsx
index d3bc6348..283b9e91 100644
--- a/src/features/telegram/user-detail/profile.tsx
+++ b/src/features/telegram/user-detail/profile.tsx
@@ -131,8 +131,11 @@ export function TelegramUserDetailPage({ data }: { data: TelegramUserDetail }) {
             meta={
               <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
                 {user.username ? <span>@{user.username}</span> : <span>No username</span>}
-                <span aria-hidden>·</span>
-                <span className="inline-flex items-center gap-1">
+                {/* Phones stack the two facts, so the separator would dangle at a line end. */}
+                <span aria-hidden className="max-shell:hidden">
+                  ·
+                </span>
+                <span className="inline-flex items-center gap-1 max-shell:basis-full">
                   Telegram ID{" "}
                   <CopyableText value={String(user.id)} what="Telegram ID" className="font-mono text-(--pn-fg)" />
                 </span>

From 53796b6712557f4a631f3ccf1c57542f979e3aa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= <infogabrielevigano@gmail.com>
Date: Mon, 12 Oct 2026 19:39:36 +0200
Subject: [PATCH 2/3] fix(mobile): polish dashboard layouts and copy

- Improve mobile toolbar, table card and section navigation layouts
- Refine labels, counts and dashboard copy
---
 docs/design.md                                | 12 ++++-----
 src/components/primitives/data-table.tsx      |  4 ++-
 src/components/shell/nav.ts                   | 14 +++++-----
 src/components/shell/page-bar.tsx             | 10 ++++---
 src/components/shell/panel.tsx                | 27 +++++++++++++------
 .../telegram/create-grant-dialog.tsx          |  4 +--
 src/features/azure/groups-page.tsx            |  2 +-
 src/features/azure/members-page.tsx           |  8 +++---
 src/features/dashboard/overview-page.tsx      | 17 ++++++++----
 src/features/faqs/faq-items.tsx               |  4 +--
 src/features/faqs/faqs-page.tsx               |  2 +-
 .../groups-by-label/categories-page.tsx       |  2 +-
 .../groups-by-label/category-page.tsx         |  2 +-
 src/features/groups/labels-filter-popover.tsx |  8 +++---
 src/features/guides/guides-page.tsx           |  2 +-
 src/features/telegram/grants-page.tsx         |  2 +-
 src/features/telegram/user-detail/profile.tsx | 14 +++-------
 src/features/web/logo-upload.tsx              |  2 +-
 src/routes/dashboard.tsx                      |  2 +-
 19 files changed, 76 insertions(+), 62 deletions(-)

diff --git a/docs/design.md b/docs/design.md
index 722cd2d1..7e5fe718 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -102,7 +102,7 @@ content in place. Between 760px and 1439px, the content follows the panel as it
 **Page header.** Scrolls with the page (the page, not the document, scrolls: the column below the top bar is the
 scroll container). `h1` 24px (22px on mobile) with the context line in 14px muted, actions on the right at 40px; below
 760px the actions take the full width under the title. The toolbar row follows 20px below. Below 760px the search takes its own row and a segmented filter fills the rest of the row it shares (scrolling
-sideways when its options don't fit); the `/` hint is hidden. `/` focuses the page
+sideways when its options don't fit) and the `Count` takes its own row under them; the `/` hint is hidden. `/` focuses the page
 search from anywhere; `Esc` clears it. A service with a single section (WhatsApp) shows its icon in a 44px tile next to
 the `h1`.
 
@@ -144,7 +144,7 @@ does not move when data arrives.
 priority; from 760px the lowest hide first when the table surface narrows, never the first or the actions column.
 Below 760px every row is a stacked card: the first column on its own line, the others inline as 12px meta
 (`mobile: "full"` gives a column its own line, `"hidden"` drops it), the actions on their own line. An unset value
-(`Unset`) is left out of the card rather than shown as a lone dash, and copyable values keep a 36px touch target
+(`Unset`) is left out of the card rather than shown as a lone dash (an unset `text` line collapses but still ends the line above it, so the meta never climbs up beside the name), and copyable values keep a 36px touch target
 without making their line taller. Give columns
 whose content length varies a `width` (the table switches to fixed layout and the title column takes the rest), so
 nothing jumps across search, filters and paging. Pagination shows in the table footer once rows exceed the smallest page
@@ -177,7 +177,7 @@ further apart, without a red border.
 **Overview.** A 52px search that opens the command palette; a hero card with the Telegram users total, its growth over
 the selected range and a TanStack Charts line (3M per day, 1Y per week, All per month; one 2px accent line, a light
 grid, month labels, a dashed hover guide and a tooltip with the date, total and growth), and Telegram groups, Open
-reports and Active grants as links on its right (a row under it on mobile, numbers on one baseline and without the "To
+reports and Active grants as links on its right (a row under it on mobile, numbers on one baseline, labelled "Groups" rather than "Telegram groups", and without the "To
 review" flag); then "Areas": one card per service whose whole surface leads where the rail icon does, with each section
 as a 44px button (two per row on mobile).
 
@@ -295,7 +295,7 @@ warning sign unless the action has its own icon). Footer right-aligned, buttons
 full width, rounded top, sliding up above the navigation, with a scrolling body and a visible footer. Microsoft 365
 member pickers use the same 18px title, then radio, avatar and name with a monospace email below; names and emails
 wrap independently. Grant dialogs put Change user in the selected-user card, full-width filled date controls on mobile,
-duration shortcuts on their own row, and an always-visible "Optional · n/500" hint under the reason. `Enter` submits single-line fields,
+duration shortcuts on their own row, and an always-visible "Optional, n/500" hint under the reason. `Enter` submits single-line fields,
 `⌘/Ctrl+Enter` textareas. On error an `InlineAlert` appears above the footer and the dialog stays open. On success a
 toast fires and the dialog closes: `ConfirmDialog` closes itself, `FormDialog` doesn't, so call `onOpenChange(false)`
 after the mutation, and keep the dialog's record in state after closing so its content survives the exit animation. A
@@ -305,7 +305,7 @@ only.
 
 **Popover or dialog.** Popover only when all hold: not destructive, at most one input or a picker, at most 320px wide,
 and closing without acting is harmless. Otherwise a dialog. Every delete is a `ConfirmDialog`. Group label filters use compact selected chips and an Add picker, one
-include/exclude tree open at a time, and a "Clear label filters · n groups" footer. On mobile the filter uses a
+include/exclude tree open at a time, and a "Clear label filters" button. On mobile the filter uses a
 bottom-sheet dialog with focus trapping and a reachable footer.
 
 **Inline editing** (`InlineEditCard`, `InlineEditRow`, `useEditSlot`), used by Projects, Associations, FAQs and Labels:
@@ -380,7 +380,7 @@ the theme reveal and the skeleton pulse switch off.
   view is a subset ("No open reports", "Nothing needs attention"); one sentence on what will appear and how, or how to
   widen the filter. Action: the page's create action as `outline` (the header primary stays), or a `ghost` "Clear
   search"/"Clear filters".
-- **Counts** (`Count`, `Intl.PluralRules`): "{n} {noun}" or "{n} of {total} {noun}", joined with " · ", never "results".
+- **Counts** (`Count`, `Intl.PluralRules`): "{n} {noun}" or "{n} of {total} {noun}", joined with ", ", never "results".
   The page header's context line carries the list's total, so the toolbar `Count` appears only while search or a
   filter narrows the list ("12 of 680 groups"). Segmented filters show a bare total per option over the whole list. Next to such a filter the toolbar `Count` appears
   only while search or another filter narrows the list further.
diff --git a/src/components/primitives/data-table.tsx b/src/components/primitives/data-table.tsx
index 0b1286a7..ba345248 100644
--- a/src/components/primitives/data-table.tsx
+++ b/src/components/primitives/data-table.tsx
@@ -118,7 +118,9 @@ const mobileCellRole = {
   main: "max-shell:basis-full max-shell:whitespace-normal",
   inline: "max-shell:min-w-0 max-shell:flex-1 max-shell:text-left max-shell:text-[14px] max-shell:font-medium",
   end: "max-shell:ml-auto max-shell:shrink-0",
-  text: "max-shell:basis-full max-shell:min-w-0 max-shell:text-[14px] max-shell:whitespace-normal max-shell:text-(--pn-fg) max-shell:[&:has(>[data-unset])]:hidden",
+  // An unset text line collapses to nothing but still ends the line above it, so the meta values never climb up beside
+  // the name and status (the row gap above is cancelled by the negative margin).
+  text: "max-shell:basis-full max-shell:min-w-0 max-shell:text-[14px] max-shell:whitespace-normal max-shell:text-(--pn-fg) max-shell:[&:has(>[data-unset])]:invisible max-shell:[&:has(>[data-unset])]:-mt-1.5 max-shell:[&:has(>[data-unset])]:max-h-0 max-shell:[&:has(>[data-unset])]:overflow-hidden",
   // An unset value (`Unset`, "—") is dropped from the card instead of showing a lone dash.
   meta: "max-shell:min-w-0 max-shell:text-left max-shell:text-xs max-shell:text-(--pn-fg-muted) max-shell:[&:has(>[data-unset])]:hidden",
   full: "max-shell:basis-full max-shell:min-w-0",
diff --git a/src/components/shell/nav.ts b/src/components/shell/nav.ts
index 3403b81f..c606f126 100644
--- a/src/components/shell/nav.ts
+++ b/src/components/shell/nav.ts
@@ -114,7 +114,7 @@ const telegram: Service = {
       icon: UserRound,
       path: "/dashboard/telegram/users",
       permission: "tg:users:read",
-      searchPlaceholder: "Search by name, username or Telegram ID…",
+      searchPlaceholder: "Search name, username or ID…",
       queryable: true,
     },
     {
@@ -131,7 +131,7 @@ const telegram: Service = {
       icon: ShieldCheck,
       path: "/dashboard/telegram/grants",
       permission: "tg:grants:read",
-      searchPlaceholder: "Search users, authorizers or reasons…",
+      searchPlaceholder: "Search user, reason or grantor…",
     },
   ],
 }
@@ -177,7 +177,7 @@ const m365: Service = {
       icon: UserRound,
       path: "/dashboard/azure/members",
       anyPermission: ["azure:members:read", "azure:members:create"],
-      searchPlaceholder: "Search by name, email or member ID…",
+      searchPlaceholder: "Search name, email or ID…",
     },
   ],
 }
@@ -216,7 +216,7 @@ const web: Service = {
       title: "Labels",
       icon: Tags,
       path: "/dashboard/web/group-labels",
-      searchPlaceholder: "Search categories, attributes and publications…",
+      searchPlaceholder: "Search labels…",
     },
     {
       id: "categories",
@@ -400,10 +400,10 @@ export function isDeepPage(match: PageMatch): boolean {
   return match.kind === "telegram-user" || match.kind === "web-category" || match.kind === "web-tag"
 }
 
-/** `document.title`: "{Section} · {Service} · PoliNetwork Admin", or "{Service} · PoliNetwork Admin". */
+/** `document.title`: "{Section} - {Service} - PoliNetwork Admin", or "{Service} - PoliNetwork Admin". */
 export function documentTitle(match: PageMatch): string {
-  if (match.kind === "not-found") return "Page not found · PoliNetwork Admin"
+  if (match.kind === "not-found") return "Page not found - PoliNetwork Admin"
   const service = serviceFor(match)
   const current = sectionFor(match)
-  return current ? `${current.title} · ${service.title} · PoliNetwork Admin` : `${service.title} · PoliNetwork Admin`
+  return current ? `${current.title} - ${service.title} - PoliNetwork Admin` : `${service.title} - PoliNetwork Admin`
 }
diff --git a/src/components/shell/page-bar.tsx b/src/components/shell/page-bar.tsx
index 6ff50876..2d6700bd 100644
--- a/src/components/shell/page-bar.tsx
+++ b/src/components/shell/page-bar.tsx
@@ -247,10 +247,10 @@ function formatCountPart({ value, total, noun, plural }: CountPart) {
 
 /**
  * "{n} {noun}" or "{n} of {total} {noun}", pluralized with Intl.PluralRules; `parts` append
- * " · {n} {noun}" segments. Pass the singular noun: `<Count value={42} noun="group" />`.
+ * ", {n} {noun}" segments. Pass the singular noun: `<Count value={42} noun="group" />`.
  */
 export function Count({ parts = [], className, ...first }: CountProps) {
-  const text = [first, ...parts].map(formatCountPart).join(" · ")
+  const text = [first, ...parts].map(formatCountPart).join(", ")
   return (
     <span
       aria-live="polite"
@@ -357,11 +357,13 @@ export function Toolbar({ lead, search, filters, count }: ToolbarProps) {
       {search ? (
         <SearchField
           {...search}
-          className={cn("max-w-115 flex-[1_1_320px] max-shell:max-w-none max-shell:basis-full", search.className)}
+          className={cn("max-w-115 flex-[1_1_300px] max-shell:max-w-none max-shell:basis-full", search.className)}
         />
       ) : null}
       {filters}
-      {count ? <div className="ml-auto flex shrink-0 pl-1">{count}</div> : null}
+      {count ? (
+        <div className="ml-auto flex shrink-0 pl-1 max-shell:ml-0 max-shell:basis-full max-shell:pl-0">{count}</div>
+      ) : null}
     </div>
   )
 }
diff --git a/src/components/shell/panel.tsx b/src/components/shell/panel.tsx
index 57b860c2..ade8e496 100644
--- a/src/components/shell/panel.tsx
+++ b/src/components/shell/panel.tsx
@@ -131,16 +131,27 @@ export function Panel({ service, match, pendingReports, className }: PanelProps)
 /** Below 760px: the service's sections as a horizontally scrolling row of pills under the top bar. */
 export function SectionPills({ service, match, pendingReports, className }: PanelProps) {
   const ref = useRef<HTMLElement>(null)
-  // Keep the current pill in view: a section past the screen edge would otherwise look unselected.
+  const currentPath = sectionFor(match)?.path
+  // Keep the current pill in view: a section past the screen edge would otherwise look unselected. Re-run when the
+  // section changes (the shell stays mounted between sections) and once the web font has settled the pill widths.
   useLayoutEffect(() => {
     const nav = ref.current
-    const current = nav?.querySelector<HTMLElement>("[aria-current=page], [data-ancestor]")
-    if (!nav || !current) return
-    const start = current.offsetLeft - 16
-    const end = current.offsetLeft + current.offsetWidth + 16 - nav.clientWidth
-    if (nav.scrollLeft > start) nav.scrollLeft = start
-    else if (nav.scrollLeft < end) nav.scrollLeft = end
-  }, [match.kind])
+    if (!nav) return
+    const reveal = () => {
+      const current = nav.querySelector<HTMLElement>("[aria-current=page], [data-ancestor]")
+      if (!current) return
+      const start = current.offsetLeft - 16
+      const end = current.offsetLeft + current.offsetWidth + 16 - nav.clientWidth
+      if (nav.scrollLeft > start) nav.scrollLeft = start
+      else if (nav.scrollLeft < end) nav.scrollLeft = end
+    }
+    reveal()
+    let live = true
+    void document.fonts?.ready.then(() => live && reveal())
+    return () => {
+      live = false
+    }
+  }, [currentPath])
   return (
     <nav
       ref={ref}
diff --git a/src/components/telegram/create-grant-dialog.tsx b/src/components/telegram/create-grant-dialog.tsx
index dec1fe3c..fa353bc4 100644
--- a/src/components/telegram/create-grant-dialog.tsx
+++ b/src/components/telegram/create-grant-dialog.tsx
@@ -288,7 +288,7 @@ function CreateGrantDialogBody({ open, onOpenChange, user: fixedUser }: CreateGr
               className={cn("min-h-[76px]", fieldControl)}
             />
             <p id="grant-reason-hint" className="text-xs text-(--pn-fg-muted) tabular-nums">
-              Optional · {reason.length}/{REASON_MAX}
+              Optional, {reason.length}/{REASON_MAX}
             </p>
           </FormField>
         </>
@@ -302,7 +302,7 @@ function SelectedUser({ user }: { user: GrantDialogUser }) {
     <>
       <p className="font-medium text-(--pn-fg)">{telegramUserName(user)}</p>
       <p className="text-(--pn-fg-muted)">
-        {user.username && `@${user.username} · `}Telegram ID <span className="font-mono tabular-nums">{user.id}</span>
+        {user.username && `@${user.username}, `}Telegram ID <span className="font-mono tabular-nums">{user.id}</span>
       </p>
     </>
   )
diff --git a/src/features/azure/groups-page.tsx b/src/features/azure/groups-page.tsx
index 0eff58fd..b8909945 100644
--- a/src/features/azure/groups-page.tsx
+++ b/src/features/azure/groups-page.tsx
@@ -144,7 +144,7 @@ export function AzureGroupsPage({
   return (
     <>
       <PageBar
-        description={`${pluralize(groups.length, "group")} · ${pluralize(totalMemberships, "membership")}`}
+        description={`${pluralize(groups.length, "group")}, ${pluralize(totalMemberships, "membership")}`}
         left={
           <Toolbar
             search={{ value: query, onChange: setQuery }}
diff --git a/src/features/azure/members-page.tsx b/src/features/azure/members-page.tsx
index 2796c30c..e7c2721a 100644
--- a/src/features/azure/members-page.tsx
+++ b/src/features/azure/members-page.tsx
@@ -55,8 +55,9 @@ const columns: DataTableColumn<AzureMember>[] = [
     sortable: true,
     align: "end",
     minWidth: 120,
-    className: "w-[120px]",
-    // Cards: a short muted "#id" before the name on the first line.
+    // Cards: the muted "#id" ends the name's line (`order`: name, id, the rest), so avatars align with or without it.
+    className:
+      "w-[120px] max-shell:order-[-1] max-shell:ml-auto max-shell:w-auto max-shell:shrink-0 max-shell:self-center",
     mobile: "meta",
     cell: (member) =>
       member.employeeId ? (
@@ -71,6 +72,7 @@ const columns: DataTableColumn<AzureMember>[] = [
     sortable: true,
     minWidth: 180,
     fill: true,
+    className: "max-shell:order-[-2]",
     mobile: "inline",
     cell: (member) => (
       <span className="flex min-w-0 items-center gap-3">
@@ -186,7 +188,7 @@ export function AzureMembersPage({ members }: { members: AzureMember[] | null })
         description={
           members === null
             ? "Create association members in Microsoft Entra"
-            : `${pluralize(shown.length, "member")} · ${pluralize(allLicenses, "license")}`
+            : `${pluralize(shown.length, "member")}, ${pluralize(allLicenses, "license")}`
         }
         left={
           members !== null ? (
diff --git a/src/features/dashboard/overview-page.tsx b/src/features/dashboard/overview-page.tsx
index 30c762ce..11a25060 100644
--- a/src/features/dashboard/overview-page.tsx
+++ b/src/features/dashboard/overview-page.tsx
@@ -94,8 +94,9 @@ function OverviewSearch() {
 }
 
 function Hero({ counts, userHistory }: OverviewPageProps) {
-  const stats: { label: string; value: OverviewCount; to: DashboardPath; flag?: ReactNode }[] = [
-    { label: "Telegram groups", value: counts.telegramGroups, to: "/dashboard/telegram/groups" },
+  // `short` is the phone label: the hero already sits under "Telegram users", so "Groups" is unambiguous there.
+  const stats: { label: string; short?: string; value: OverviewCount; to: DashboardPath; flag?: ReactNode }[] = [
+    { label: "Telegram groups", short: "Groups", value: counts.telegramGroups, to: "/dashboard/telegram/groups" },
     {
       label: "Open reports",
       value: counts.openReports,
@@ -138,9 +139,15 @@ function Hero({ counts, userHistory }: OverviewPageProps) {
               className="group/stat flex min-w-0 items-center gap-3 rounded-(--pn-r-4) px-5 py-4.5 text-(--pn-fg) transition-[background-color] duration-120 hover:bg-(--pn-hover) max-shell:min-w-0 max-shell:flex-1 max-shell:items-start max-shell:px-3 max-shell:py-2.5"
             >
               <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-                {/* Two reserved lines on mobile, so the three numbers share a baseline when a label wraps. */}
-                <span className="text-[13px] text-(--pn-fg-muted) max-shell:min-h-8 max-shell:text-xs max-shell:leading-4">
-                  {stat.label}
+                <span className="text-[13px] text-(--pn-fg-muted) max-shell:text-xs max-shell:leading-4">
+                  {stat.short ? (
+                    <>
+                      <span className="max-shell:hidden">{stat.label}</span>
+                      <span className="shell:hidden">{stat.short}</span>
+                    </>
+                  ) : (
+                    stat.label
+                  )}
                 </span>
                 <span className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
                   {stat.value === null ? (
diff --git a/src/features/faqs/faq-items.tsx b/src/features/faqs/faq-items.tsx
index 079f86ae..f8809406 100644
--- a/src/features/faqs/faq-items.tsx
+++ b/src/features/faqs/faq-items.tsx
@@ -218,14 +218,14 @@ export function EditableFaq({ faqId, initial, dirtyRef, onCancel, onSave }: Edit
               {questionIt && answerIt && (
                 <TranslationPanel lang="it" editing>
                   <InlineEditInput bare ref={firstField} {...questionIt} className="font-medium" />
-                  <div aria-hidden className="border-t border-(--pn-line)" />
+                  <div aria-hidden className="my-2 border-t border-(--pn-line)" />
                   <InlineEditTextarea bare {...answerIt} />
                 </TranslationPanel>
               )}
               {questionEn && answerEn && (
                 <TranslationPanel lang="en" editing>
                   <InlineEditInput bare {...questionEn} className="font-medium" />
-                  <div aria-hidden className="border-t border-(--pn-line)" />
+                  <div aria-hidden className="my-2 border-t border-(--pn-line)" />
                   <InlineEditTextarea bare {...answerEn} />
                 </TranslationPanel>
               )}
diff --git a/src/features/faqs/faqs-page.tsx b/src/features/faqs/faqs-page.tsx
index c40447c2..d86c706f 100644
--- a/src/features/faqs/faqs-page.tsx
+++ b/src/features/faqs/faqs-page.tsx
@@ -243,7 +243,7 @@ export function FAQsPage({ categories }: { categories: FAQs }) {
                   <div className="flex min-w-0 flex-1 flex-col">
                     <h2 className="truncate text-[18px] leading-6 font-semibold">{category.titleIt}</h2>
                     <span className="truncate text-[13px] text-(--pn-fg-muted)">
-                      <span lang="en">{category.titleEn}</span> · {pluralize(faqs.length, "FAQ")}
+                      <span lang="en">{category.titleEn}</span>, {pluralize(faqs.length, "FAQ")}
                     </span>
                   </div>
                   {canWrite ? (
diff --git a/src/features/groups-by-label/categories-page.tsx b/src/features/groups-by-label/categories-page.tsx
index 7f2fd0de..a86c93a0 100644
--- a/src/features/groups-by-label/categories-page.tsx
+++ b/src/features/groups-by-label/categories-page.tsx
@@ -82,7 +82,7 @@ function RootCard({ root, groupLabels }: { root: LabelTreeNode; groupLabels: str
             </Link>
           </h2>
           <span className="text-[13px] text-(--pn-fg-muted) tabular-nums">
-            {pluralize(countCategoryDescendants(root), "category")} ·{" "}
+            {pluralize(countCategoryDescendants(root), "category")},{" "}
             {pluralize(countBranchGroups(groupLabels, root.path), "group")}
           </span>
         </div>
diff --git a/src/features/groups-by-label/category-page.tsx b/src/features/groups-by-label/category-page.tsx
index 26eb58c8..b92283c6 100644
--- a/src/features/groups-by-label/category-page.tsx
+++ b/src/features/groups-by-label/category-page.tsx
@@ -129,7 +129,7 @@ export function CategoryPage({ path, labels, groups, tgGroups }: CategoryPagePro
             meta={
               <span className="tabular-nums">
                 {pluralize(rows.length, "group")} tagged directly
-                {node.children.length > 0 && ` · ${formatNumber(nestedCount)} in sub-categories`}
+                {node.children.length > 0 && `, ${formatNumber(nestedCount)} in sub-categories`}
               </span>
             }
             description={node.label?.description}
diff --git a/src/features/groups/labels-filter-popover.tsx b/src/features/groups/labels-filter-popover.tsx
index 0146888c..25d48f31 100644
--- a/src/features/groups/labels-filter-popover.tsx
+++ b/src/features/groups/labels-filter-popover.tsx
@@ -163,7 +163,7 @@ type LabelsFilterPopoverProps = {
 }
 
 /**
- * The `Labels` toolbar filter: an outline button showing "Labels · n" when active and a 320px
+ * The `Labels` toolbar filter: an outline button showing "Labels" and a count pill when active and a 320px
  * popover with "Must have" / "Must not have" pickers. A label picked on one side is hidden on the other.
  */
 export function LabelsFilterPopover({ labels, value, onChange, groupCount }: LabelsFilterPopoverProps) {
@@ -272,8 +272,7 @@ export function LabelsFilterPopover({ labels, value, onChange, groupCount }: Lab
           <Tags aria-hidden strokeWidth={1.75} data-icon="inline-start" />
           Labels
           {active && (
-            <span className="tabular-nums text-(--pn-fg-muted)">
-              <span aria-hidden>· </span>
+            <span className="rounded-full bg-(--pn-accent-soft) px-1.75 text-xs leading-5 font-medium text-(--pn-accent) tabular-nums">
               {count}
               <span className="sr-only"> active</span>
             </span>
@@ -313,8 +312,7 @@ export function LabelsFilterPopover({ labels, value, onChange, groupCount }: Lab
         <Tags aria-hidden strokeWidth={1.75} data-icon="inline-start" />
         Labels
         {active && (
-          <span className="tabular-nums text-(--pn-fg-muted)">
-            <span aria-hidden>· </span>
+          <span className="rounded-full bg-(--pn-accent-soft) px-1.75 text-xs leading-5 font-medium text-(--pn-accent) tabular-nums">
             {count}
             <span className="sr-only"> active</span>
           </span>
diff --git a/src/features/guides/guides-page.tsx b/src/features/guides/guides-page.tsx
index aa590785..04339585 100644
--- a/src/features/guides/guides-page.tsx
+++ b/src/features/guides/guides-page.tsx
@@ -134,7 +134,7 @@ export function GuidesPage({ guides }: { guides: Guide[] }) {
                   <StatusBadge tone="brand">Latest</StatusBadge>
                 </div>
                 <p className="text-[14px] text-(--pn-fg-muted)">
-                  Published {formatDate(parseISO(latest.date))} · linked on the website
+                  Published {formatDate(parseISO(latest.date))}, linked on the website
                 </p>
               </div>
               <Button
diff --git a/src/features/telegram/grants-page.tsx b/src/features/telegram/grants-page.tsx
index ee336c94..9d5ad79e 100644
--- a/src/features/telegram/grants-page.tsx
+++ b/src/features/telegram/grants-page.tsx
@@ -267,7 +267,7 @@ export function TelegramGrantsPage({ grants: { ongoing, scheduled, grantors } }:
         description="Periods when a user may send links without automatic moderation"
         left={
           <Toolbar
-            search={{ value: query, onChange: updateQuery, placeholder: "Search users, authorizers or reasons…" }}
+            search={{ value: query, onChange: updateQuery, placeholder: "Search user, reason or grantor…" }}
             filters={
               <SegmentedControl
                 label="Grant status"
diff --git a/src/features/telegram/user-detail/profile.tsx b/src/features/telegram/user-detail/profile.tsx
index 283b9e91..b8748f03 100644
--- a/src/features/telegram/user-detail/profile.tsx
+++ b/src/features/telegram/user-detail/profile.tsx
@@ -129,12 +129,8 @@ export function TelegramUserDetailPage({ data }: { data: TelegramUserDetail }) {
             }
             badge={grants?.ongoing ? <StatusBadge tone="success">Grant active</StatusBadge> : undefined}
             meta={
-              <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
+              <span className="flex flex-wrap items-center gap-x-4 gap-y-1">
                 {user.username ? <span>@{user.username}</span> : <span>No username</span>}
-                {/* Phones stack the two facts, so the separator would dangle at a line end. */}
-                <span aria-hidden className="max-shell:hidden">
-                  ·
-                </span>
                 <span className="inline-flex items-center gap-1 max-shell:basis-full">
                   Telegram ID{" "}
                   <CopyableText value={String(user.id)} what="Telegram ID" className="font-mono text-(--pn-fg)" />
@@ -262,13 +258,10 @@ function MessageRow({ message }: { message: Message }) {
       <blockquote className="w-fit max-w-full rounded-(--pn-r-4) rounded-tl-(--pn-r-1) bg-(--pn-muted) px-4 py-3 text-[15px] leading-6 whitespace-pre-wrap text-(--pn-fg) [overflow-wrap:anywhere]">
         {message.message}
       </blockquote>
-      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
         <time dateTime={message.timestamp.toISOString()} className="text-(--pn-fg-muted) tabular-nums">
           {formatDateTime(message.timestamp)}
         </time>
-        <span aria-hidden className="text-(--pn-fg-subtle)">
-          ·
-        </span>
         <a
           href={link}
           target="_blank"
@@ -376,11 +369,10 @@ const auditColumns: DataTableColumn<Audit>[] = [
     mobile: "full",
     cell: (audit) =>
       audit.groupTitle && audit.groupId !== null ? (
-        <span className="flex min-w-0 items-baseline gap-1">
+        <span className="flex min-w-0 items-baseline gap-2">
           <Hint overflowOnly label={audit.groupTitle}>
             <span className="truncate">{audit.groupTitle}</span>
           </Hint>
-          <span className="shrink-0 text-(--pn-fg-muted)">·</span>
           <span className="shrink-0 font-mono text-(--pn-fg-muted) tabular-nums">{audit.groupId}</span>
         </span>
       ) : (
diff --git a/src/features/web/logo-upload.tsx b/src/features/web/logo-upload.tsx
index 6db05f89..abbe9026 100644
--- a/src/features/web/logo-upload.tsx
+++ b/src/features/web/logo-upload.tsx
@@ -133,7 +133,7 @@ export function WebLogoUpload({ rules, onChange, onError, disabled, ...logo }: W
         className="sr-only"
         onChange={(event) => void choose(event.target.files?.[0])}
       />
-      <Hint label={`${label} · ${rules.hint}`}>
+      <Hint label={`${label}: ${rules.hint}`}>
         <button
           type="button"
           aria-label={label}
diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
index b20a7bb1..ba35c739 100644
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@@ -31,7 +31,7 @@ export const Route = createFileRoute("/dashboard")({
       : Promise.resolve(null),
   }),
   staleTime: 60_000,
-  // One title for every dashboard page, from the deepest match: "{Section} · {Service} · PoliNetwork Admin".
+  // One title for every dashboard page, from the deepest match: "{Section} - {Service} - PoliNetwork Admin".
   head: ({ matches }) => ({ meta: [{ title: documentTitle(matchPath(matches.at(-1)?.pathname ?? "/dashboard")) }] }),
   // Unknown `/dashboard/…` URLs render in the shell's content column; a failure in this route's own `beforeLoad` or
   // loader has no shell yet, so the same component centres itself on the page.

From 6fa525365008f3e2d30d77411ec437f93eff684f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= <infogabrielevigano@gmail.com>
Date: Tue, 13 Oct 2026 11:22:36 +0200
Subject: [PATCH 3/3] fix(navigation): reveal active section after viewport
 changes

Observe the mobile section bar size so its active pill stays visible when the bar appears or narrows. Disconnect the observer on cleanup and cover resize, font loading and cleanup behavior with regression tests. Document the affected overview and FAQ components.
---
 docs/design.md                           |  3 +-
 src/components/shell/panel.tsx           | 18 +----
 src/components/shell/section-scroll.ts   | 22 ++++++
 src/features/dashboard/overview-page.tsx |  2 +
 src/features/faqs/faq-items.tsx          |  1 +
 tests/section-scroll.test.mjs            | 90 ++++++++++++++++++++++++
 6 files changed, 119 insertions(+), 17 deletions(-)
 create mode 100644 src/components/shell/section-scroll.ts
 create mode 100644 tests/section-scroll.test.mjs

diff --git a/docs/design.md b/docs/design.md
index 7e5fe718..537fa711 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -114,7 +114,8 @@ the `h1`.
 
 **Small screens** (below 760px). Rail and panel leave the layout. A 56px top bar holds the logo (Overview), the
 service title ("PoliNetwork Admin" on Overview), Search, the theme toggle and the avatar; the service's sections follow
-as horizontally scrolling pills that scroll away with the page, scrolled so the current one is in view; a 64px bottom nav lists the five services (current one
+as horizontally scrolling pills that scroll away with the page. The current pill stays in view after navigation,
+font loading and changes to the bar's width, including when it first appears below 760px. A 64px bottom nav lists the five services (current one
 accent with a top bar, Reports with the open-reports dot). Section pills and bottom nav are the only navigation; there
 is no sheet.
 
diff --git a/src/components/shell/panel.tsx b/src/components/shell/panel.tsx
index ade8e496..5fa87597 100644
--- a/src/components/shell/panel.tsx
+++ b/src/components/shell/panel.tsx
@@ -4,6 +4,7 @@ import { type KeyboardEvent, Suspense, use, useDeferredValue, useLayoutEffect, u
 import { cn } from "@/lib/utils"
 
 import { type PageMatch, type Section, type Service, isDeepPage, sectionFor } from "./nav"
+import { observeSectionScroll } from "./section-scroll"
 import { ServiceGlyph } from "./service-glyph"
 
 const itemClass =
@@ -132,25 +133,10 @@ export function Panel({ service, match, pendingReports, className }: PanelProps)
 export function SectionPills({ service, match, pendingReports, className }: PanelProps) {
   const ref = useRef<HTMLElement>(null)
   const currentPath = sectionFor(match)?.path
-  // Keep the current pill in view: a section past the screen edge would otherwise look unselected. Re-run when the
-  // section changes (the shell stays mounted between sections) and once the web font has settled the pill widths.
   useLayoutEffect(() => {
     const nav = ref.current
     if (!nav) return
-    const reveal = () => {
-      const current = nav.querySelector<HTMLElement>("[aria-current=page], [data-ancestor]")
-      if (!current) return
-      const start = current.offsetLeft - 16
-      const end = current.offsetLeft + current.offsetWidth + 16 - nav.clientWidth
-      if (nav.scrollLeft > start) nav.scrollLeft = start
-      else if (nav.scrollLeft < end) nav.scrollLeft = end
-    }
-    reveal()
-    let live = true
-    void document.fonts?.ready.then(() => live && reveal())
-    return () => {
-      live = false
-    }
+    return observeSectionScroll(nav)
   }, [currentPath])
   return (
     <nav
diff --git a/src/components/shell/section-scroll.ts b/src/components/shell/section-scroll.ts
new file mode 100644
index 00000000..af958ad7
--- /dev/null
+++ b/src/components/shell/section-scroll.ts
@@ -0,0 +1,22 @@
+/** Keep the active section visible after navigation, font loading, and changes to the mobile nav's size. */
+export function observeSectionScroll(nav: HTMLElement) {
+  let live = true
+  /** Scroll only as far as needed to show the current or ancestor pill with the nav's 16px edge padding. */
+  const reveal = () => {
+    if (!live || nav.clientWidth === 0) return
+    const current = nav.querySelector<HTMLElement>("[aria-current=page], [data-ancestor]")
+    if (!current) return
+    const start = current.offsetLeft - 16
+    const end = current.offsetLeft + current.offsetWidth + 16 - nav.clientWidth
+    if (nav.scrollLeft > start) nav.scrollLeft = start
+    else if (nav.scrollLeft < end) nav.scrollLeft = end
+  }
+  const observer = new ResizeObserver(reveal)
+  observer.observe(nav)
+  reveal()
+  void nav.ownerDocument.fonts?.ready.then(reveal)
+  return () => {
+    live = false
+    observer.disconnect()
+  }
+}
diff --git a/src/features/dashboard/overview-page.tsx b/src/features/dashboard/overview-page.tsx
index 11a25060..525e8a93 100644
--- a/src/features/dashboard/overview-page.tsx
+++ b/src/features/dashboard/overview-page.tsx
@@ -93,6 +93,7 @@ function OverviewSearch() {
   )
 }
 
+/** Stream user growth and service counts into the overview hero, with shorter statistic labels on phones. */
 function Hero({ counts, userHistory }: OverviewPageProps) {
   // `short` is the phone label: the hero already sits under "Telegram users", so "Groups" is unambiguous there.
   const stats: { label: string; short?: string; value: OverviewCount; to: DashboardPath; flag?: ReactNode }[] = [
@@ -282,6 +283,7 @@ function Areas({ openReports }: { openReports: OverviewCount }) {
   )
 }
 
+/** Link to a service and its sections, including the open-report count when the service is Reports. */
 function AreaCard({ service, openReports }: { service: Service; openReports: OverviewCount }) {
   const { serviceHref } = useShellFrame()
   const wide = service.sections.length > 3
diff --git a/src/features/faqs/faq-items.tsx b/src/features/faqs/faq-items.tsx
index f8809406..5c499500 100644
--- a/src/features/faqs/faq-items.tsx
+++ b/src/features/faqs/faq-items.tsx
@@ -42,6 +42,7 @@ export function toFaqInput(faq: FAQItem): FaqInput {
   }
 }
 
+/** Pair FAQ text with its language badge; questions can wrap to three lines on phones. */
 function LanguageLine({ lang, children, muted }: { lang: "IT" | "EN"; children: string; muted?: boolean }) {
   return (
     <span className="flex min-w-0 items-center gap-2 max-shell:items-start">
diff --git a/tests/section-scroll.test.mjs b/tests/section-scroll.test.mjs
new file mode 100644
index 00000000..ff74764c
--- /dev/null
+++ b/tests/section-scroll.test.mjs
@@ -0,0 +1,90 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+
+import { observeSectionScroll } from "../src/components/shell/section-scroll.ts"
+
+function installResizeObserver(t, callback) {
+  const original = globalThis.ResizeObserver
+  globalThis.ResizeObserver = callback
+  t.after(() => {
+    if (original === undefined) delete globalThis.ResizeObserver
+    else globalThis.ResizeObserver = original
+  })
+}
+
+void test("active section becomes visible when the desktop nav is revealed on mobile", (t) => {
+  let resize
+  let disconnected = false
+  installResizeObserver(
+    t,
+    class {
+      constructor(callback) {
+        resize = callback
+      }
+      observe() {}
+      disconnect() {
+        disconnected = true
+      }
+    }
+  )
+  const current = { offsetLeft: 440, offsetWidth: 100 }
+  const nav = {
+    clientWidth: 0,
+    scrollLeft: 0,
+    ownerDocument: {},
+    querySelector: () => current,
+  }
+  const cleanup = observeSectionScroll(nav)
+  assert.equal(nav.scrollLeft, 0, "hidden navigation does not change its scroll position")
+  nav.clientWidth = 390
+  resize()
+  assert.equal(nav.scrollLeft, 166, "desktop-to-mobile resize reveals the active pill")
+  nav.clientWidth = 320
+  resize()
+  assert.equal(nav.scrollLeft, 236, "further narrowing keeps the active pill visible")
+  current.offsetLeft = 16
+  resize()
+  assert.equal(nav.scrollLeft, 0, "a pill before the visible range scrolls back into view")
+  cleanup()
+  assert.equal(disconnected, true)
+})
+
+void test("font loading repositions the ancestor pill and cleanup prevents later scrolling", async (t) => {
+  let resize
+  installResizeObserver(
+    t,
+    class {
+      constructor(callback) {
+        resize = callback
+      }
+      observe() {}
+      disconnect() {}
+    }
+  )
+  let fontsReady
+  const current = { offsetLeft: 16, offsetWidth: 100 }
+  const nav = {
+    clientWidth: 390,
+    scrollLeft: 0,
+    ownerDocument: {
+      fonts: {
+        ready: new Promise((resolve) => {
+          fontsReady = resolve
+        }),
+      },
+    },
+    querySelector: (selector) => {
+      assert.equal(selector, "[aria-current=page], [data-ancestor]")
+      return current
+    },
+  }
+  const cleanup = observeSectionScroll(nav)
+  current.offsetLeft = 440
+  fontsReady()
+  await nav.ownerDocument.fonts.ready
+  assert.equal(nav.scrollLeft, 166)
+  cleanup()
+  current.offsetLeft = 600
+  resize()
+  assert.equal(nav.scrollLeft, 166, "a queued resize callback cannot scroll after cleanup")
+})