/* "Other" flyout menu in the sidebar (Collections/Games Database/Rules/ Explorer/Gift/Settings) -- additive on top of styles.css's .nav-links, same convention as dashboard.css's .is-active rule (kept out of styles.css itself so frontend/index.html, which shares the same sidebar markup but has nothing "active", is unaffected). */ .nav-links a.is-active { background: rgba(245, 185, 66, 0.12); color: var(--accent); } .nav-links a.is-active .nav-icon { color: var(--accent); } .nav-more { position: relative; } .nav-more-trigger { cursor: pointer; } /* .sidebar has overflow-y:auto (styles.css) -- per the CSS spec, when one axis is non-visible and the other is left at its 'visible' default, the visible one is force-computed to 'auto' too. That means .sidebar always clips horizontally as well, so an absolutely-positioned flyout nested inside it (left:100%, escaping the sidebar's own width) would get clipped to a sliver instead of floating over the page -- that was the real cause of the "bar" bug report (a clipped flyout masquerading as a stray scrollbar-looking fragment at the sidebar's right edge). Fixed by reparenting this menu to on load (nav-other.js) and position:fixed + JS-computed coordinates instead of living inside .nav-more at all -- it's no longer a descendant of anything that clips it, on any viewport size, so the old mobile media-query override is gone too (JS keeps it on-screen instead). */ .nav-more-menu { position: fixed; min-width: 190px; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: rgba(10, 16, 28, 0.97); backdrop-filter: blur(24px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); z-index: 500; flex-direction: column; gap: 2px; } /* display:flex only when NOT hidden -- a bare "display: flex" here would beat the UA stylesheet's [hidden]{display:none} at equal specificity (the recurring bug across this codebase's admin/train/daily-puzzle CSS), so the flex layout itself is gated on the same attribute. */ .nav-more-menu:not([hidden]) { display: flex; } .nav-more-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 0.92rem; white-space: nowrap; } .nav-more-menu a:hover { background: rgba(255, 255, 255, 0.07); } /* Once JS reparents .nav-more-menu to , its tags are no longer descendants of .nav-links, so the .nav-links a.is-active rule above stops matching them -- same highlighting, repeated here directly. */ .nav-more-menu a.is-active { background: rgba(245, 185, 66, 0.12); color: var(--accent); }