From f4d6361b6245d5168dfe3d9e3b48e17ae23694e8 Mon Sep 17 00:00:00 2001
From: lgcosta <me@luizgustavo.pro.br>
Date: Thu, 5 Nov 2026 11:46:12 -0300
Subject: [PATCH] =?UTF-8?q?fix(ui):=20paridade=20Firefox=20nos=20bot=C3=B5?=
 =?UTF-8?q?es=20da=20toolbar=20=E2=80=94=20alturas=20fixas,=20sem=20inflar?=
 =?UTF-8?q?=20com=20m=C3=A9tricas=20de=20emoji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Firefox calcula line-height:normal pelas métricas verticais da fonte do
conteúdo (Noto Color Emoji infla botões com ícone; glifos simples ficam
menores) → linha desalinhada/desproporcional, igual em Chrome.

- .btn: inline-flex + height 28px (small 22px) — conteúdo não afeta a caixa
- .segmented .seg: height 26px (container 28 com a borda); select da toolbar 28px
- .tag-chip 20px; .tree-menu/.ftree-act line-height 1
- resets ::-moz-focus-inner/-outer
- sw v13

Verificado com Firefox 159 headless e Chromium no mesmo harness e no app
real: alturas idênticas (28/26/22/20 desktop; 40/40/38 mobile via min-height).
---
 web/css/app.css | 32 +++++++++++++++++++++++++-------
 web/sw.js       |  2 +-
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web/css/app.css b/web/css/app.css
index ab9ddbd..8ea4bec 100644
--- a/web/css/app.css
+++ b/web/css/app.css
@@ -149,16 +149,24 @@ code { font-family: var(--mono); font-size: 0.92em; }
    fundo com o tom de painel imediatamente mais escuro.
    --------------------------------------------------------------------------- */
 .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
   font: inherit;
   font-size: 13px;
   color: var(--fg);
   border: 1px solid var(--border);
   border-radius: 0;
-  padding: 4px 12px;
+  padding: 0 12px;
   cursor: pointer;
   background: var(--panel);
   transition: background .12s ease, border-color .12s ease, color .12s ease;
 }
+/* paridade Firefox: sem a borda/padding internos do foco e sem inflar a
+   linha com as métricas verticais da fonte de emoji (altura é fixa acima) */
+button::-moz-focus-inner { border-style: none; padding: 0; }
+button::-moz-focus-outer { border: 0; }
 .btn:hover { background: var(--panel-2); border-color: color-mix(in oklab, var(--border), var(--fg) 20%); }
 .btn:active { background: color-mix(in oklab, var(--panel-2), var(--fg) 8%); }
 .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@@ -170,7 +178,7 @@ code { font-family: var(--mono); font-size: 0.92em; }
 .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
 .btn-danger:hover { background: color-mix(in oklab, var(--danger), black 12%); border-color: color-mix(in oklab, var(--danger), black 12%); color: #fff; }
 .btn-danger:active { background: color-mix(in oklab, var(--danger), black 20%); color: #fff; }
-.btn-small { font-size: 12px; padding: 2px 9px; }
+.btn-small { font-size: 12px; padding: 0 9px; height: 22px; }
 .fmt { min-width: 32px; justify-content: center; font-size: 13px; }
 #fmt-tools.disabled { opacity: .45; pointer-events: none; }
 
@@ -181,7 +189,8 @@ code { font-family: var(--mono); font-size: 0.92em; }
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 0;
-  padding: 4px 8px;
+  height: 28px;
+  padding: 0 8px;
 }
 
 .segmented {
@@ -191,12 +200,15 @@ code { font-family: var(--mono); font-size: 0.92em; }
   background: var(--panel);
 }
 .segmented .seg {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
   border: 0;
   border-right: 1px solid var(--border-soft);
   background: transparent;
   font: inherit;
   font-size: 12px;
-  padding: 4px 14px;
+  padding: 0 14px;
   cursor: pointer;
   color: var(--muted);
   transition: background .15s ease, color .15s ease;
@@ -241,13 +253,16 @@ body.sidebar-off #sidebar { display: none; }
 }
 #tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; }
 .tag-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
   font: inherit;
   font-size: 12px;
   border: 1px solid var(--border);
   background: var(--panel);
   color: var(--accent-dark);
   border-radius: 0;
-  padding: 1px 8px;
+  padding: 0 8px;
   cursor: pointer;
 }
 .tag-chip:hover { border-color: var(--accent); }
@@ -640,7 +655,9 @@ body.no-gutter #gutter { display: none; }
   background: none;
   color: var(--muted);
   cursor: pointer;
-  padding: 0 4px;
+  font-size: 12px;
+  line-height: 1;
+  padding: 3px 4px;
   border-radius: 0;
   visibility: hidden;
 }
@@ -1769,8 +1786,9 @@ html[data-theme="carbon-paper"] #revisions-list li:hover { background: #e6e5dd;
   background: none;
   cursor: pointer;
   font-size: 11px;
+  line-height: 1;
   color: var(--muted);
-  padding: 1px 4px;
+  padding: 3px 4px;
   border-radius: 0;
 }
 .ftree-act:hover { background: var(--accent); color: #fff; }
diff --git a/web/sw.js b/web/sw.js
index a069def..c79b12c 100644
--- a/web/sw.js
+++ b/web/sw.js
@@ -1,7 +1,7 @@
 /* Service Worker do Notas — caches versionados.
  * BUMP de CACHE em todo deploy que mude shell/assets (o activate limpa os antigos).
  */
-const CACHE = 'notas-shell-v12';
+const CACHE = 'notas-shell-v13';
 const SHELL = [
   '/',
   '/css/app.css',