From babf529627bf97f129c78926f08d9d48027c1ccd Mon Sep 17 00:00:00 2001
From: matteoscrugli <ma.scrugli@gmail.com>
Date: Tue, 13 Jan 2026 01:57:03 +0100
Subject: [PATCH] Fix mobile user button styling to be perfectly circular

- Add aspect-ratio, min-width/height for consistent sizing
- Remove focus ring and inner element background/border-radius
- Prevent grid layout from distorting button shape

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/styles/Layout.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css
index 39c167a..25046b0 100644
--- a/frontend/src/styles/Layout.css
+++ b/frontend/src/styles/Layout.css
@@ -367,6 +367,9 @@ label,
   justify-content: center;
   width: 32px;
   height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  aspect-ratio: 1;
   background: rgba(var(--color-accent-rgb), 0.2);
   border: none;
   border-radius: 50%;
@@ -374,15 +377,28 @@ label,
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .mobile-user-btn:hover {
   background: rgba(var(--color-accent-rgb), 0.35);
 }
 
+.mobile-user-btn:focus,
+.mobile-user-btn:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .mobile-user-btn .user-initial {
   font-size: 0.875rem;
   font-weight: 700;
+  background: none !important;
+  width: auto !important;
+  height: auto !important;
+  border-radius: 0 !important;
+  color: inherit;
 }
 
 
@@ -574,6 +590,7 @@ label,
     display: flex;
     grid-column: 3;
     justify-self: end;
+    align-self: center;
     margin-right: 6px;
   }
 
@@ -581,6 +598,7 @@ label,
     width: 32px;
     height: 32px;
     min-width: 32px;
+    min-height: 32px;
   }
 
   .page-tabs-container,