fix(frontend): keep avatar and name visible in a narrow multiselect - #3714
Open
tink-bot wants to merge 1 commit into
Open
fix(frontend): keep avatar and name visible in a narrow multiselect#3714tink-bot wants to merge 1 commit into
tink-bot wants to merge 1 commit into
Conversation
The assignee dropdown rendered blank rows whenever its column got narrow —
most visibly in the task detail modal, which caps the task view at 1024px so
a handful of active attribute fields squeezes the assignees column to ~130px.
Two causes, both in the search result row:
- `.search-result-button > span:first-child` used `flex: 1`, i.e. a flex-basis
of `0`. Flexbox distributes negative free space in proportion to
`flex-shrink × flex-base-size`, so a zero-basis item gets no share of it:
the `.hint-text` sibling (flex-basis `auto`) claimed the whole row and the
option content resolved to width 0, then got clipped by its own
`overflow: hidden`. Using `flex: 1 1 auto` makes both items shrink
proportionally; behaviour when the row has room is unchanged.
- The hint is `color: transparent` until the row is hovered, so on a cramped
row it is an invisible column eating the width the label needs. Drop it via
the container query the multiselect already declares a container for.
`.avatar-wrapper` also gets `flex-shrink: 0` — Bulma's `img { max-width: 100% }`
reset caps the avatar at its wrapper's width, so a shrinking wrapper collapsed
the avatar to zero even once the row had space again.
Fixes #3709
github-actions
Bot
added
area/avatars
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-3714
docker run -p 3456:3456 ghcr.io/go-vikunja/vikunja:pr-3714Last updated for commit b1f2815 |
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.
Assignee dropdown rendered blank rows when its column got narrow — most visibly in the task detail modal, which caps the task view at 1024px, so a few active attribute fields squeeze the assignees column to ~130px.
Fixes #3709
Two causes, both in the search result row:
.search-result-button > span:first-childusedflex: 1, a flex-basis of0. Flexbox splits negative free space byflex-shrink × flex-base-size, so a zero-basis item gets none of it:.hint-text(basisauto) claimed whole row, option content resolved to width 0, then clipped by its ownoverflow: hidden.flex: 1 1 autoshrinks both proportionally; no change when row has room.color: transparentuntil hover, so on cramped row it is invisible column eating width label needs. Dropped via container query — multiselect already declarescontainer-type: inline-size..avatar-wrapperalso getsflex-shrink: 0: Bulma'simg { max-width: 100% }reset caps avatar at wrapper width, so shrinking wrapper collapsed avatar to zero.How to verify
Before this PR: the dropdown opened but every row was blank, with no avatar and no name.