Skip to content

Adjust width of page nav buttons to avoid hiding the code block clip buttons #917

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

noritada
Copy link

@noritada noritada commented Jul 15, 2025

Since #894 was applied, it has been difficult to access the code clip buttons.
When I move the cursor from the lower left direction of the button, the next page navigation button covers the button before I reach it, as screenshots below shows.
(When I move the cursor from almost directly left of the button, I can reach it.)

This PR fixes that issue by reducing the width of the page navigation buttons.
I hope you will apply it if you like it.

ss 2025-07-15 14 25 41 ss 2025-07-15 14 26 00

@rustbot
Copy link
Collaborator

rustbot commented Jul 15, 2025

r? @ehuss

rustbot has assigned @ehuss.
They will have a look at your PR within the next two weeks and either review your PR or reassign to another reviewer.

Use r? to explicitly pick a reviewer

@rustbot rustbot added the S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. label Jul 15, 2025
@noritada noritada force-pushed the fix/code-block-clip-button-access branch from 39ffa14 to afe0519 Compare July 15, 2025 06:27
@ehuss
Copy link
Contributor

ehuss commented Jul 15, 2025

r? Kobzol

@rustbot rustbot assigned Kobzol and unassigned ehuss Jul 15, 2025
@Kobzol
Copy link
Member

Kobzol commented Jul 17, 2025

It seems like the navbar appears when the page width is >1080 pixels (https://github.com/rust-lang/mdBook/blob/05c6a9944696c470d62aa1b85e3613d9242755af/src/front-end/css/chrome.css#L194), and after my previous change we would ideally need to change this to something like ~1250 pixels.

Can you try adding this:

@media only screen and (max-width: 1250px) {
    .nav-wide-wrapper { display: none; }
    .nav-wrapper { display: none; }
}

to css/style.css, to see if it fixes the issue for you?

@apiraino
Copy link
Contributor

I can reproduce the issue (or what I think the reported issue is about) if I enlarge the browser window just after the navigation buttons at the bottom turn into the "sidebar" navigation.

See this screencast

recording.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
S-waiting-on-review Status: Awaiting review from the assignee but also interested parties.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants