Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve styling of sidebar entries that wrap #419

Merged
merged 7 commits into from
Jul 28, 2023

Conversation

lorenzolewis
Copy link
Contributor

What kind of changes does this PR include?

  • Changes to Starlight code

Description

If a sidebar entry wraps to a new line then it can be difficult to distinguish that entry from the ones above/below it. This puts in a fix to visually indent any subsequent lines.

Before:
Screenshot 2023-07-27 at 14 17 49
Screenshot 2023-07-27 at 14 23 08

After:
Screenshot 2023-07-27 at 14 17 37
Screenshot 2023-07-27 at 14 23 17

Signed-off-by: Lorenzo Lewis <lorenzo_lewis@icloud.com>
Signed-off-by: Lorenzo Lewis <lorenzo_lewis@icloud.com>
@changeset-bot
Copy link

changeset-bot bot commented Jul 27, 2023

🦋 Changeset detected

Latest commit: 2668218

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@astrojs/starlight Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Jul 27, 2023

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit 2668218
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/64c430057d83b00008fb27a2
😎 Deploy Preview https://deploy-preview-419--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Jul 27, 2023
Copy link
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this @lorenzolewis! I’ve noticed this issue before. I actually think the issue could be better addressed by a narrower line height? That would mean the wrapped lines nestle closer together and form a single visual unit more clearly. Been meaning to tackle that.

I think the requirement would be:

  • narrower line-height
  • a little extra vertical padding so that the current appearance for single-line links is preserved.

@lorenzolewis
Copy link
Contributor Author

Sure, I can get behind that. I'll play around with it a bit to dial it in and update

@lorenzolewis
Copy link
Contributor Author

Screenshot 2023-07-28 at 21 52 49 Screenshot 2023-07-28 at 21 52 45

@delucis here's those changes, feel free to dial them as you see fit. I tried to keep the overall vertical height of an item as close as possible.

Copy link
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was quick! Looks fantastic, thank you @lorenzolewis. One stylistic nit but that’s all I got.

packages/starlight/components/SidebarSublist.astro Outdated Show resolved Hide resolved
@delucis delucis changed the title Fix sidebar entry line wrap Improve styling of sidebar entries that wrap Jul 28, 2023
@delucis delucis merged commit 38ff53c into withastro:main Jul 28, 2023
9 checks passed
@astrobot-houston astrobot-houston mentioned this pull request Jul 28, 2023
@lorenzolewis lorenzolewis deleted the feat/fix-sidebar-wrap-css branch July 28, 2023 21:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 core Changes to Starlight’s main package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants