Doc template on mobile unable to access social menu

[magicDGS]

What version of starlight are you using?

0.11.1

What version of astro are you using?

0.11.1

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Firefox/Chrome

Describe the Bug

In the basic example directly, there is no way to access on mobile the social links on a documentation page (docs template). The menu shows at the end of the navigatio the theme (and the language), but the social icons aren't. This is probably related to #977

I haven't mark checkbox to participate with a PR, but I am willing to do so if I have some guidance as I am not familiar with the codebase (nor too much with javascript yet, although I have experience on other programming languages and software development in general).

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics

Participation

• I am willing to submit a pull request for this issue.

[delucis]

Thanks for the issue @magicDGS! This is something we’re aware of and already asked our designer to propose a solution:

Rendering here is done with the MobileMenuFooter.astro component:

starlight/packages/starlight/components/MobileMenuFooter.astro

Lines 6 to 9 in c7112f9

	<div class="mobile-preferences sl-flex">
	<ThemeSelect {...Astro.props} />
	<LanguageSelect {...Astro.props} />
	</div>

We’d need to add SocialIcons.astro to the components rendered here.

There’s a few more considerations needed probably in terms of layout for the various combinations with/without social icons and with/without the language select and we’ll also need to think about how this all wraps if there are too many icons to fit on a narrow viewport (I try to make sure things work OK at least down to a 280px viewport). If you think you’d like to try and make a PR, please feel free to ask any more questions and we’ll do our best to help you get going!

[magicDGS]

Thank you @delucis for the guidance here. I did a PR adding the changes, I have test locally and also on the netlify deployment from the PR and looks alright. But I have the following questions:

• In the case of 280px viewport, maybe the social icons are a bit too close. In that case, please let me know what would be the best way to pad them (I am still a beginner on UI development)
• I am not sure what is the best way to test too many icons. Should I just add them to some example docs and check there?

[delucis]

In the case of 280px viewport, maybe the social icons are a bit too close. In that case, please let me know what would be the best way to pad them (I am still a beginner on UI development)

Left a suggestion to wrap them in the PR.

I am not sure what is the best way to test too many icons. Should I just add them to some example docs and check there?

Yeah! You could also just temporarily add a few links and share a screenshot in the PR.