Keep a generating chat's spinner clear of the kebab on hover - #7751
Open
danielhanchen wants to merge 1 commit into
Open
Keep a generating chat's spinner clear of the kebab on hover#7751danielhanchen wants to merge 1 commit into
danielhanchen wants to merge 1 commit into
Conversation
An unpinned Recents row sits at pr-4 and widens to pr-6 on hover to make room for the kebab. The kebab is absolutely positioned at the row's right edge and its glyph starts 30px in (pr-1.5 plus a size-6 glyph), so 24px of padding leaves the trailing spinner 2px under the icon, with the two glyphs touching for as long as the pointer is on the row. Use pr-8 instead, but only while the row is generating. Rows without a spinner keep pr-6 and the extra character of title that goes with it. Measured on a running Studio, hovering a generating row goes from a 2px overlap to a 6px gap, and the spinner clears the kebab's 24px glyph box by 2px.
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.
Follow-up to #7749, which lined the sidebar spinners up on one column. This handles the other half of that trailing slot, the hover state.
Problem
An unpinned Recents row is
pr-4at rest and widens topr-6on hover to make room for the kebab. The kebab is absolutely positioned at the row's right edge, and.sidebar-row-action(pr-1.5) plus itssize-6glyph puts the glyph 30px in. 24px of hover padding is 6px short of that, so a row that is generating ends up with its spinner underneath the icon.Measured on a running Studio at a 1440px viewport, row right edge at 273:
pr-4pr-6The kebab's 24px glyph box (243 to 267) overlaps the spinner by 6px, and the painted icon by 2px. The two glyphs touch for as long as the pointer stays on the row.
Fix
Use
pr-8(32px) for the hover and menu-open states, but only while the row is generating. That clears the 30px inset with 2px to spare.Rows that are not generating keep
pr-6untouched, so the existing tradeoff noted in the comment there, that the title keeps one more character, still holds for every row that has no spinner to protect.Verification
Same measurement after the change:
npm run typecheckcleannpm run test288 passing, including a new case that derives the 30px kebab inset fromindex.cssand asserts every padding on the generating branch clears itbuttonClassdeclaration, with all 10085 nodes outside it identical