fix: collapse view buttons into dropdown when overflowing#2306
Open
maggch97 wants to merge 7 commits intogo-vikunja:mainfrom
Open
fix: collapse view buttons into dropdown when overflowing#2306maggch97 wants to merge 7 commits intogo-vikunja:mainfrom
maggch97 wants to merge 7 commits intogo-vikunja:mainfrom
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
maggch97
force-pushed
the
user/weijiezhao/viewdropdown
branch
from
8e7ba16 to
1818b68
Compare
kolaente
reviewed
Feb 26, 2026
maggch97
force-pushed
the
user/weijiezhao/viewdropdown
branch
3 times, most recently
from
20327e3 to
1818b68
Compare
Remove the separate hidden measurement element. Instead, keep the inline buttons always in the DOM and hide them with CSS when overflowing, so they serve both as visible buttons and as the width measurement reference. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Wrap DropdownItems in a div with @click="close" because BaseButton with :to renders a RouterLink which does not emit the component-level click event, so @click on DropdownItem itself has no effect. A native click handler on a wrapper div catches the bubbled event from the anchor element. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Hide the switch-view container until the first overflow check completes on mount, so users never see inline buttons briefly flash before collapsing into the dropdown. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Move visibility hiding from the entire container to only the inline buttons element, so the filter button in the header slot remains visible during the initial overflow measurement. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Constrain the hidden overflow-measurement element within its container so it no longer extends beyond the viewport on mobile. Add position: relative to the container and clip the hidden element with inset-inline-start/end: 0 and overflow: hidden. scrollWidth still reports the actual content width for the overflow check. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Preview DeploymentPreview deployments for this PR are available at:
The preview environment will start automatically on first visit. Subsequent pushes to this PR will update the Run locally with Dockerdocker pull ghcr.io/go-vikunja/vikunja:pr-2306
docker run -p 3456:3456 ghcr.io/go-vikunja/vikunja:pr-2306Last updated for commit d03bf38 |
Member
|
Should it do this? 
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When a project has many views, the view switcher buttons overflow the screen horizontally, making some views inaccessible.
Solution
Automatically detect when the view buttons would overflow the container and collapse them into a dropdown menu.