matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile user button styling to be perfectly circular

Browse Source 
- 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>
This commit is contained in:
matteoscrugli
2026-01-13 01:57:03 +01:00
parent 155aef9778
commit babf529627
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/styles/Layout.css
View File

@@ -367,6 +367,9 @@ label,
justify-content: center; justify-content: center;
width: 32px; width: 32px;
height: 32px; height: 32px;
min-width: 32px;
min-height: 32px;
aspect-ratio: 1;
background: rgba(var(--color-accent-rgb), 0.2); background: rgba(var(--color-accent-rgb), 0.2);
border: none; border: none;
border-radius: 50%; border-radius: 50%;
@@ -374,15 +377,28 @@ label,
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
flex-shrink: 0; flex-shrink: 0;
padding: 0;
box-sizing: border-box;
} }
.mobile-user-btn:hover { .mobile-user-btn:hover {
background: rgba(var(--color-accent-rgb), 0.35); 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 { .mobile-user-btn .user-initial {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 700; 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; display: flex;
grid-column: 3; grid-column: 3;
justify-self: end; justify-self: end;
align-self: center;
margin-right: 6px; margin-right: 6px;
} }
@@ -581,6 +598,7 @@ label,
width: 32px; width: 32px;
height: 32px; height: 32px;
min-width: 32px; min-width: 32px;
min-height: 32px;
} }
.page-tabs-container, .page-tabs-container,