"Personal tools" dropdown (... button) is invisible on desktop despite toggling correctly
- Dominant language
- No language data
- Stars
- 30
- Forks
- 8
- PR merge metrics
- No merged PRs in 30d
Description
## Steps to Reproduce
1. Visit https://indieweb.org on a desktop browser (tested on Chrome, Safari, and macOS)
2. Ensure the viewport is ≥720px wide
3. Click the ⋯ (three-dot) button to the right of the "Log in" button in the top nav
## Observed Behavior
A small visual artifact appears briefly but no dropdown content is visible. Inspecting the DOM confirms:
- `aria-expanded` correctly flips to `true` on click
- `vector-dropdown-content` is present in the DOM and populated (login link, menu items)
- No console errors are thrown
## Expected Behavior
A dropdown menu should appear with personal tools options (e.g. login link).
## Root Cause
A media query in `load.php` unconditionally hides `.user-links-collapsible-item` at ≥720px with no exception for the expanded state:
```css
@media screen and (min-width: 720px) {
.vector-user-menu .user-links-collapsible-item {
display: none;
}
}
```
## Suggested Fix
Since the "Log in" button is already visible in the nav at ≥720px, the ⋯ button is redundant at that breakpoint. The simplest fix is to hide `#vector-user-links-dropdown-label` at ≥720px rather than patching the dropdown visibility logic.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in load.php by inspecting the desktop media query for .user-links-collapsible-item and the #vector-user-links-dropdown-label element. Verify the navigation at viewports below and above 720px, then confirm that the redundant three-dot control is hidden at desktop widths while the visible Log in button remains available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100