From 5b246a538495f1b0dd7c94a54b865b5c9953ab1d Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Sun, 17 May 2026 14:31:45 +0200
Subject: [PATCH 1/2] Limit negative outline-offset to elements with clipped
 overflow

Previously, all elements had the negative offset applied in order to
allow borders to show in clipped-overflow ancestors, which adversely
affected standard links in content and action icons.

Renames navTabBorderWidth to borderWidth and uses where appropriate.
---
 assets/css/custom-props/common.css |  2 +-
 assets/css/focus.css               |  4 +---
 assets/css/settings.css            |  4 ++--
 assets/css/sidebar.css             | 28 ++++++++++++++++++++++++----
 assets/css/tabset.css              | 10 +++++++---
 5 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css
index 6ffba6a27..331bcda49 100644
--- a/assets/css/custom-props/common.css
+++ b/assets/css/custom-props/common.css
@@ -5,7 +5,7 @@
   --borderRadius-lg: 14px;
   --borderRadius-base: 8px;
   --borderRadius-sm: 3px;
-  --navTabBorderWidth: 2px;
+  --borderWidth: 2px;
 
   /* Font Families */
   /* These mirror modern-normalize.css with "Lato" on top */
diff --git a/assets/css/focus.css b/assets/css/focus.css
index 6d58f5efc..2fb0a80ab 100644
--- a/assets/css/focus.css
+++ b/assets/css/focus.css
@@ -7,9 +7,7 @@ button:focus,
 [type="button"]:focus,
 [type="reset"]:focus,
 [type="submit"]:focus {
-  outline: 2px solid var(--main);
-  /* negative offset to make outline visible when overflow hidden */
-  outline-offset: -2px;
+  outline: var(--borderWidth) solid var(--main);
 }
 
 *:focus:not(:focus-visible),
diff --git a/assets/css/settings.css b/assets/css/settings.css
index 55b1cc506..f4a445e80 100644
--- a/assets/css/settings.css
+++ b/assets/css/settings.css
@@ -102,8 +102,8 @@
   }
 
   & .switch-button__checkbox:focus + .switch-button__bg {
-    outline: 2px solid var(--main);
-    outline-offset: 2px;
+    outline: var(--borderWidth) solid var(--main);
+    outline-offset: var(--borderWidth);
   }
 
   & .switch-button__checkbox:focus:not(:focus-visible) + .switch-button__bg {
diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
index 3e9c3596f..0885e2ff6 100644
--- a/assets/css/sidebar.css
+++ b/assets/css/sidebar.css
@@ -135,6 +135,11 @@
       color: var(--sidebarStaleVersion);
       font-weight: 400;
     }
+
+    /* keep focus outline inside overflow-clipped ancestor */
+    & a:focus {
+      outline-offset: calc(-1 * var(--borderWidth));
+    }
   }
 
   & .sidebar-staleIcon {
@@ -149,6 +154,11 @@
     overflow: auto;
     scrollbar-width: thin;
 
+    /* keep focus outline inside overflow-clipped ancestor */
+    & button:focus {
+      outline-offset: calc(-1 * var(--borderWidth));
+    }
+
     & :is(li, li button) {
       text-transform: uppercase;
       letter-spacing: 0.02em;
@@ -165,7 +175,7 @@
     & button {
       background: none;
       border: 0;
-      border-bottom: var(--navTabBorderWidth) solid transparent;
+      border-bottom: var(--borderWidth) solid transparent;
       border-radius: 0;
       -webkit-appearance: none;
       text-align: inherit;
@@ -178,13 +188,13 @@
       transition: var(--transition-all);
 
       &:not([aria-selected]):hover {
-        border-bottom: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
+        border-bottom: var(--borderWidth) solid var(--sidebarInactiveItemBorder);
         color: var(--sidebarAccentMain);
         transition: var(--transition-all);
       }
 
       &[aria-selected] {
-        border-bottom: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
+        border-bottom: var(--borderWidth) solid var(--sidebarLanguageAccentBar);
         color: var(--sidebarAccentMain);
       }
     }
@@ -212,6 +222,11 @@
       text-overflow: ellipsis;
     }
 
+    /* keep focus outline inside overflow-clipped ancestor */
+    & a:focus {
+      outline-offset: calc(-1 * var(--borderWidth));
+    }
+
     & li {
       padding: 0;
       line-height: 27px;
@@ -239,7 +254,7 @@
     & a {
       margin-right: 30px;
       padding: 3px 0 3px 12px;
-      border-left: var(--navTabBorderWidth) solid transparent;
+      border-left: var(--borderWidth) solid transparent;
       color: var(--sidebarItem);
 
       &[aria-selected] {
@@ -385,6 +400,11 @@
   &:hover {
     color: var(--sidebarHover);
   }
+
+  /* keep focus outline inside overflow-clipped ancestor */
+  &:focus {
+    outline-offset: calc(-1 * var(--borderWidth));
+  }
 }
 
 body:not(.sidebar-open) .sidebar-button {
diff --git a/assets/css/tabset.css b/assets/css/tabset.css
index a268f0dfe..c7f106994 100644
--- a/assets/css/tabset.css
+++ b/assets/css/tabset.css
@@ -1,8 +1,7 @@
 .tabset {
-  --borderWidth: 1px;
   --tabsetPadding: var(--baseLineHeight);
   margin: var(--baseLineHeight) 0;
-  border: var(--borderWidth) solid var(--tabBorder);
+  border: 1px solid var(--tabBorder);
   padding: 0 var(--tabsetPadding);
   border-radius: var(--borderRadius-lg);
 }
@@ -25,11 +24,16 @@
   border: 0;
   box-shadow: none;
   cursor: pointer;
-  border-bottom-width: 2px;
+  border-bottom-width: var(--borderWidth);
   border-bottom-style: solid;
   border-bottom-color: transparent;
   transition: var(--transition-all);
 
+  /* keep focus outline inside overflow-clipped ancestor */
+  &:focus {
+    outline-offset: calc(-1 * var(--borderWidth));
+  }
+
   &:hover {
     border-bottom-color: var(--tabBorderTop);
     color: var(--textHeaders);

From a2187cc15213e9a818f983fd56a1c09050a7d504 Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Sun, 17 May 2026 20:28:30 +0200
Subject: [PATCH 2/2] Centre sidebar menu button icon

---
 assets/css/layout.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/layout.css b/assets/css/layout.css
index 77493ede2..8c3c6523c 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -38,7 +38,7 @@ body {
 }
 
 .sidebar-button {
-  padding: 20px 12px 18px 19px;
+  padding: 20px 12px 18px;
   position: fixed;
   z-index: 200;
   top: 0;