Responsive header on mobile: (.astro pages only!)

rsimon commented 2 months ago

What version of `starlight` are you using?

0.26.1

What version of `astro` are you using?

4.14.5

What package manager are you using?

npm

What operating system are you using?

Mac, Linux

What browser are you using?

Chrome

Describe the Bug

first off: thanks for building such a fantastic framework. Creating my documentation site with Starlight has been a fantastic experience so far!

I recently ran into two weird problems when viewing my site on mobile.

The page header is not sticky.
The upper half of the top bar (with logo, search and hamburger menu) extends beyond the width of the screen, introducing horizontal scrolling.

I am seeing this problem only in .astro pages. .mdx pages are fine. Therefore, this isn't really a critical issue for me. But I just thought I'd report.

Example

https://github.com/user-attachments/assets/1f21c7e7-7734-439b-81f4-525fa9d802ff

Online

You can also try the behavior yourself.

Here's a page from my site that's based on an .astro page using the <StarlightPage> component.
Here's an .mdx page which is working fine on mobile.

Link to Minimal Reproducible Example

https://new.annotorious.com/getting-started/

Participation

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

HiDeoo commented 2 months ago

:wave: Thanks for your feedback.

The page header is not sticky.

I have not been able to reproduce this issue, would you mind providing more details about the browser/device you are using?

The upper half of the top bar (with logo, search and hamburger menu) extends beyond the width of the screen, introducing horizontal scrolling.

Assuming https://github.com/annotorious/annotorious-website is the repository of the project, it looks like the issue is related to the ImageExample and OpenSeadragonExample components you created which include some CSS that set the width of .actions to 640px and seems to be causing the issue.

rsimon commented 2 months ago

Argh - sorry. Yes, you are totally right. Thanks for looking into this. I missed that width: 640px rule. Also, I had to remove a display: table rule I set for the table at the bottom. After these two fixes, everything worked as it should. Sorry for the hassle & thanks again!

withastro / starlight