fix(webapp): move ? tooltips after toggle switches in UploadSidebar#734
Merged
Conversation
camathieu
force-pushed
the
fix/upload-sidebar-tooltip-alignment
branch
from
85de427 to
3572592
Compare
camathieu
force-pushed
the
fix/upload-sidebar-tooltip-alignment
branch
from
3572592 to
e8de5a1
Compare
camathieu
changed the title
Member
Author
|
docker deploy |
Restructures all 9 setting rows in UploadSidebar to use a flat flexbox layout: [svg] [text flex-1] [toggle] [?] — instead of the previous nested structure where the help icon was inline within the text span. The tooltip is now right-aligned (anchored at the ? icon's right edge) to prevent overflow clipping now that the anchor sits at the sidebar's far right. A left-anchor variant is provided for the Expiration section header, where the ? is not at the far right. Vertical alignment is fixed by making .setting-help-wrap a flex container (display: flex; align-items: center), eliminating line-height-induced offsets without needing any mt-* hacks. An expirationHelp tooltip is also added to the EXPIRATION section heading, with translations in all 12 supported locales. Closes #736
camathieu
force-pushed
the
fix/upload-sidebar-tooltip-alignment
branch
from
e8de5a1 to
ee1d3ab
Compare
|
🚀 Deployment Successful! The instance at plik.root.gg has been redeployed with image |
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
1 participant
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.
Description
What
Restructures the help tooltip layout in the upload settings sidebar to implement the approach proposed in #736: place the
?icon after the toggle switch at the far right of each row, in a consistent fixed column.Why
The previous implementation placed the
?inline within the text span. This required workarounds (items-start,self-start mt-0.5on toggles for multi-line rows, inline-flex hacks) and still produced alignment inconsistencies. Moving the?to the end of the row simplifies the markup, guarantees consistent vertical alignment, and eliminates all the edge-case handling.Changes
UploadSidebar.vue: All 9 setting rows (including the Expiration section header) use a flatflex items-centerlayout:[svg] [text flex-1] [toggle] [?]. The?is a direct flex child after the toggle.style.css:setting-help-wrapis now a flex container (display: flex; align-items: center) to eliminate line-height-induced vertical offset between the?circle and the toggle.setting-tooltipis right-anchored (right: 0) so the tooltip opens leftward and stays within the sidebar. Arrow adjusted toright: 3px.setting-tooltip-left-anchorvariant (left: 0) for tooltips whose?is not at the far right (e.g. the Expiration section header)..setting-help-wrap.inline-flexrule.expirationHelpkey to all 12 supported locales, with a new?tooltip on the EXPIRATION section heading.Testing
make test-frontend)make frontend)Closes #736