From f61b352efb398b243c4e2db6ca787d039f7d209b Mon Sep 17 00:00:00 2001
From: Amr Mohammed El-Sheraey <141947355+AmrMsCLL@users.noreply.github.com>
Date: Sun, 11 Oct 2026 14:41:05 +0300
Subject: [PATCH] fix: stop focus rings on open lists and the 1px page scroll
 from the header border (0.4.1)

---
 README.md                   | 2 +-
 package-lock.json           | 4 ++--
 package.json                | 2 +-
 src/components/AppShell.tsx | 4 ++--
 src/theme.css               | 8 +++++---
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 62aca1b..78fb191 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ router: apps pass their own link component in through `UiProvider`.
 Install a release by URL. No registry account or token is needed:
 
 ```sh
-npm install --save-exact https://github.com/project-graphite/graphite-ui/releases/download/v0.4.0/project-graphite-ui-0.4.0.tgz
+npm install --save-exact https://github.com/project-graphite/graphite-ui/releases/download/v0.4.1/project-graphite-ui-0.4.1.tgz
 ```
 
 Load the theme after Tailwind. `@source` lets Tailwind see the classes the components use, and its
diff --git a/package-lock.json b/package-lock.json
index e862f54..dad1674 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@project-graphite/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@project-graphite/ui",
-      "version": "0.4.0",
+      "version": "0.4.1",
       "license": "MIT",
       "devDependencies": {
         "@tailwindcss/vite": "4.3.3",
diff --git a/package.json b/package.json
index 490c620..1376fed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@project-graphite/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Project Graphite design tokens, theme and React components.",
   "license": "MIT",
   "repository": {
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index a60c31d..1011e47 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -70,8 +70,8 @@ export function AppShell({
         <a className="skip-link" href="#content">
           skip to content
         </a>
-        <header className="sticky top-0 z-20 border-b border-line-soft bg-paper/90 backdrop-blur-md">
-          <div className={sidebar ? 'shell-bar flex h-16 items-center gap-2' : 'shell flex h-16 items-center gap-6'}>
+        <header className="sticky top-0 z-20 h-(--header-height) border-b border-line-soft bg-paper/90 backdrop-blur-md">
+          <div className={sidebar ? 'shell-bar flex h-full items-center gap-2' : 'shell flex h-full items-center gap-6'}>
             {sidebar && (
               <button
                 aria-controls="app-sidebar"
diff --git a/src/theme.css b/src/theme.css
index 322cb3c..60fd574 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -235,9 +235,11 @@ body {
   }
 }
 
-:focus-visible {
-  outline: 2px solid var(--color-ink);
-  outline-offset: 3px;
+@layer base {
+  :focus-visible {
+    outline: 2px solid var(--color-ink);
+    outline-offset: 3px;
+  }
 }
 
 @layer components {