From d3e7cd45a303bcd2c06757ead05306d334836074 Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.dev>
Date: Tue, 1 Sep 2026 08:49:24 +0200
Subject: [PATCH] fix: make mobile header overflow reachable

---
 .../header/configurable-header.module.css      | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/src/components/layout/header/configurable-header.module.css b/apps/nextjs/src/components/layout/header/configurable-header.module.css
index ace02eee7..e1dbb161d 100644
--- a/apps/nextjs/src/components/layout/header/configurable-header.module.css
+++ b/apps/nextjs/src/components/layout/header/configurable-header.module.css
@@ -80,7 +80,7 @@
 
 .mobileContent {
   display: none;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: max-content minmax(0, 1fr);
   align-items: center;
   gap: var(--mantine-spacing-xs);
   width: 100%;
@@ -103,8 +103,20 @@
 }
 
 .mobileZone[data-zone="right"] {
-  justify-content: flex-start;
-  max-width: 72vw;
+  justify-content: safe flex-end;
+  width: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--mantine-color-dimmed) transparent;
+}
+
+.mobileZone[data-zone="right"]::-webkit-scrollbar {
+  display: block;
+  height: rem(6px);
+}
+
+.mobileZone[data-zone="right"]::-webkit-scrollbar-thumb {
+  border-radius: var(--mantine-radius-xl);
+  background: var(--mantine-color-dimmed);
 }
 
 .floatingControls {