Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-17 10:15:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Chats sidebar: 'manage' label sits in flex flow so its area is clickable

Browse Source 
Email's 'new' label is absolutely positioned to the LEFT of the '+'
icon, which works there because the '+' is the visible/clickable
anchor. The chats manage button has no visible glyph at rest, so the
label was rendered outside the button's bounding box — hovering
'manage' lost the :hover state and clicking it missed.

Override list-item-plus-label inside chats-manage-btn:
  position: static (in flex flow) + max-width:0 / max-width:80px
expand-on-hover so the button's clickable rect grows alongside the
text. Hover stays sticky; click hits.
This commit is contained in:
pewdiepie-archdaemon
2026-06-10 22:39:05 +09:00
parent 49ecd806a2
commit 94931ba59f
1 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+17
View File
@@ -1261,6 +1261,23 @@ body.bg-pattern-sparkles {
#sessions-section .chats-manage-btn { opacity: 0.35 !important; } #sessions-section .chats-manage-btn { opacity: 0.35 !important; }
#sessions-section .chats-manage-btn:active { opacity: 1 !important; } #sessions-section .chats-manage-btn:active { opacity: 1 !important; }
} }
/* Pull the 'manage' label out of email's absolute-positioning trick
so it sits in the flex flow and expands the button's clickable
area as it slides in. Otherwise hovering the visible 'manage'
text would actually be outside the button's bounding box. */
#sessions-section .chats-manage-btn .list-item-plus-label {
position: static;
transform: none;
max-width: 0;
overflow: hidden;
padding-right: 0;
transition: max-width 0.2s ease, opacity 0.18s ease, padding-right 0.18s ease;
}
#sessions-section .chats-manage-btn:hover .list-item-plus-label,
#sessions-section .chats-manage-btn:focus-visible .list-item-plus-label {
max-width: 80px;
padding-right: 4px;
}
/* Collapse chevron */ /* Collapse chevron */
.section-collapse-btn { .section-collapse-btn {