Skip to content

fix: clear BackToTop float to prevent nav layout shift#623

Open
mathieumaf wants to merge 1 commit intosatnaing:mainfrom
mathieumaf:fix/back-to-top-button-layout
Open

fix: clear BackToTop float to prevent nav layout shift#623
mathieumaf wants to merge 1 commit intosatnaing:mainfrom
mathieumaf:fix/back-to-top-button-layout

Conversation

@mathieumaf
Copy link

When SHARE_LINKS is empty, the BackToTopButton's md:float-end was not cleared before the prev/next navigation grid, pushing buttons out of alignment. Adding clear-end on the separating <hr> fixes this.

Fixes #614

Description

When SHARE_LINKS is empty in src/constants.ts, the ShareLinks component renders nothing. This means the BackToTopButton's md:float-end is not cleared before the prev/next navigation grid, causing the "Next Post" / "Previous Post" buttons to shift left instead of staying properly aligned.

The fix adds clear-end on the <hr> that separates the share links section from the navigation, ensuring the float is always cleared regardless of whether share links are present.

Types of changes

  • Bug Fix (non-breaking change which fixes an issue)
  • New Feature (non-breaking change which adds functionality)
  • Documentation Update (if none of the other choices apply)
  • Others (any other types not listed above)

Checklist

  • I have read the Contributing Guide
  • I have added the necessary documentation (if appropriate)
  • Breaking Change (fix or feature that would cause existing functionality to not work as expected)

Further comments

Single-line change in src/layouts/PostDetails.astro (line 129):

- <hr class="my-6 border-dashed" />
+ <hr class="my-6 clear-end border-dashed" />

Tested both with empty and populated SHARE_LINKS — no regression.

Related Issue

Closes: #614

…v layout

When SHARE_LINKS is empty, the BackToTopButton's md:float-end was not
cleared before the prev/next navigation grid, pushing buttons out of
alignment. Adding clear-end on the separating <hr> fixes this.

Fixes satnaing#614

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: The back to top button affects the style of the page turn button

1 participant