Tooltip for max 10 favourite labels#1464
Conversation
There was a problem hiding this comment.
Pull request overview
This PR addresses #994 by surfacing a user-facing hint when the maximum number of favourite labels (10) has been reached, and preventing additional favourites from being added via the UI.
Changes:
- Propagates a
canHaveMoreFavouritesflag fromlabelTrees→labelTree→labelTreeLabelto control favourite eligibility. - Disables the favourite star button and updates its
titleto explain the 10-favourites limit. - Adjusts label-tree body scrolling styles and adds disabled styling for the favourite button.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| resources/assets/sass/label-trees/components/_labelTrees.scss | Changes scrolling behavior and hides scrollbars for the label trees body. |
| resources/assets/sass/label-trees/components/_labelTreeLabel.scss | Adds styling for the disabled favourite button state. |
| resources/assets/js/label-trees/components/labelTrees.vue | Computes and passes down canHaveMoreFavourites based on MAX_FAVOURITES. |
| resources/assets/js/label-trees/components/labelTree.vue | Accepts and forwards canHaveMoreFavourites to label nodes. |
| resources/assets/js/label-trees/components/labelTreeLabel.vue | Disables favourite button and adjusts tooltip based on favourites limit. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@mzur On my macbook with firefox the scrollbar overlapped with the star-shaped favourite button, so I disabled it. |
| scrollbar-width: none; | ||
|
|
||
| &::-webkit-scrollbar { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
I'm hesitant to hide it completely. What about scrollbar-width: thin?
There was a problem hiding this comment.
Side-by-side, it does make it sufficiently small
However, even with thin, once the cursor gets near the scroll bar, the browser "snaps" to it, taking half of the space of the button away, hiding it:
and since scrollbar-width is only supported by firefox, we'd have to add custom styling for webkit-based-browsers, for example:
/* Chrome, Safari, Edge */
.label-trees__body::-webkit-scrollbar {
width: 6px; /* thin */
}
.label-trees__body::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.4);
border-radius: 3px;
}
.label-trees__body::-webkit-scrollbar-track {
background: transparent;
}but even here I'm struggling with preventing the scrollbar from growing once the cursor is close to it. Not sure.
Closes #994