Fix weird spacing on "Start Session" button in empty console (#14155)#14381
Closed
PGupta-Git wants to merge 1 commit into
Closed
Fix weird spacing on "Start Session" button in empty console (#14155)#14381PGupta-Git wants to merge 1 commit into
PGupta-Git wants to merge 1 commit into
Conversation
The Button component renders a native <button> element which has
browser UA default padding (1px 6px). When used inline within a
text sentence ("There is no session running. Use [Start Session]
to start one."), this padding creates unwanted vertical and
horizontal whitespace around the button text.
This was introduced in posit-dev#12795 which replaced PositronButton (a
<div role='button'> with no default browser padding) with the
Button component (a native <button>).
Fix by adding padding: 0 and vertical-align: baseline to the
.link class in emptyConsole.css, which resets the browser
default button padding and keeps the button text aligned with
the surrounding text.
Fixes posit-dev#14155
Contributor
Author
Member
|
Thank you for this PR, @PGupta-Git! 🙌 We will need to apply your commits to a new, non-fork PR because of the problems outlined in #6628 |
Contributor
Author
Thank you so much. Please let me know if I need to do anything from my end. |
Contributor
|
Thanks for this fix @PGupta-Git! 🎉 I've opened up #14445 as a non-fork PR with your changes and am going to close this one out |
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 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.
Fixes #14155
Description
Fixes the weird spacing around the Start Session button in the Console when no session is running.
Root Cause
This was introduced in #12795 which replaced
PositronButton(a<div role="button">with zero browser-default padding) with theButtoncomponent (a native<button>element).Native
<button>elements have browser UA stylesheet default padding (1px 6px). When used inline within a text sentence — "There is no session running. Use [Start Session] to start one." — this padding creates unwanted vertical and horizontal whitespace around the button text, making it look like a hyperlink with extra internal spacing.Fix
Added two CSS properties to the
.linkrule inemptyConsole.css:This resets the UA default padding for the button in this specific inline-text context only (scoped to
.empty-console .title .link), without affecting theButtoncomponent globally.Testing
emptyConsole.vitest.tsxcontinue to pass — they verify the text content and click behavior, which are unaffected.