fix(ui): ensure all icon buttons remain perfectly square

- Add padding: 0 and box-sizing: border-box to .icon-button
- Add box-sizing: border-box to .profile-avatar
- Update .sidebar-header-bar .toggle-sidebar-btn to use fixed width/height instead of min values
- Add explicit styling for .bookmarks-container.collapsed .toggle-sidebar-btn
- Ensure borders don't add to total dimensions (33px x 33px including borders)
This commit is contained in:
Gigi
2025-10-03 02:05:19 +02:00
parent 0d956ed692
commit c21c29d5ee

View File

@@ -122,6 +122,7 @@ body {
border: 1px solid #444;
flex-shrink: 0;
color: #ddd;
box-sizing: border-box;
}
.profile-avatar img {
@@ -138,16 +139,17 @@ body {
background: transparent;
color: #ddd;
border: 1px solid #444;
padding: 0.4rem;
padding: 0;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 33px;
min-height: 33px;
width: 33px;
height: 33px;
flex-shrink: 0;
box-sizing: border-box;
}
.sidebar-header-bar .toggle-sidebar-btn:hover {
@@ -166,6 +168,31 @@ body {
padding-top: 1rem;
}
.bookmarks-container.collapsed .toggle-sidebar-btn {
background: #2a2a2a;
color: #ddd;
border: 1px solid #444;
padding: 0;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 33px;
height: 33px;
box-sizing: border-box;
}
.bookmarks-container.collapsed .toggle-sidebar-btn:hover {
background: #333;
color: #fff;
}
.bookmarks-container.collapsed .toggle-sidebar-btn:active {
transform: translateY(1px);
}
.user-info {
margin: 0.5rem 0 0 0;
color: #888;
@@ -242,6 +269,8 @@ body {
cursor: pointer;
min-width: 33px;
min-height: 33px;
padding: 0;
box-sizing: border-box;
}
.icon-button:hover { background: #333; }