improve mobile preferences position in sidebar

[Pranay-Tej]

Description

• As a first-time user opening the docs site, language or color scheme is probably the first thing they expect to update according to their preference.
• While these preferences are easily visible on the desktop, on mobile they are not that straight-forward to find.
• User has to scroll to the very end of the sidebar list to discover the preferences section. The longer the list, the lesser that chances that the user discovers this menu.

Live Link

• Please find the updated changes in the link below. (use mobile-view)
• https://starlight-mobile-preferences.netlify.app/getting-started

How other frameworks do this

VitePress has a separate menu for preferences.

Docusarus has it's color theme switch at the top but the language selection is at the bottom of the sidbar items. (that too, after clicking the `← Back to main menu` button)

Changes

• Move mobile preferences position from bottom of sidebar to the top of sidebar

• update MobileMenuFooter.mobile-preferences padding and border to align it properly with the SidebarSublist below

• add padding-bottom to SidebarSublist.top-level to allow some breathing room for the last item in SidebarSublist

Before

After

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6e1c1c7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	6e1c1c7
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/67cee6ccfad1f10008f66241
😎 Deploy Preview	https://deploy-preview-2953--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[astrobot-houston]

Hello! Thank you for opening your first PR to Starlight! ✨

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Netlify 🤩

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[delucis]

Hi @Pranay-Tej! Thanks for wanting to contribute to Starlight and help us improve it! I appreciate you opening a PR, but I don’t think this is a change we want to make.

In the future I’d recommend opening a discussion first to discuss the issues at hand. That helps us to prioritise work as we can get feedback from other users to see if they are also running into this. It also allows us to understand the issue and then discuss what a good potential solution might be rather than jumping to a solution. (And avoids anyone spending time on a PR that may not be accepted.)