gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix TOC button overlap with back-to-top on mobile

Browse Source 
Adjusted TOC button positioning to prevent overlap with the back-to-top
button on mobile devices:

- Mobile: bottom-20 (80px) - sits well above back-to-top at bottom-6
- Desktop: lg:bottom-8 - maintains original desktop position
- Both buttons now aligned to right-4 on mobile for consistency

This gives ~56px vertical spacing between buttons on mobile,
preventing any overlap while keeping both easily accessible.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
gbanyan
2025-11-20 23:08:50 +08:00
parent a77cd17419
commit 5d226a2969
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/post-layout.tsx
View File

@@ -23,9 +23,9 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
<button <button
onClick={() => setIsTocOpen(!isTocOpen)} onClick={() => setIsTocOpen(!isTocOpen)}
className={cn( className={cn(
"toc-button fixed bottom-8 right-8 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md hover:bg-white dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900", "toc-button fixed bottom-20 right-4 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md hover:bg-white dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900",
"text-sm font-medium text-slate-600 dark:text-slate-300", "text-sm font-medium text-slate-600 dark:text-slate-300",
"lg:right-20" // Adjust position for desktop "lg:bottom-8 lg:right-20" // Adjust position for desktop
)} )}
aria-label="Toggle Table of Contents" aria-label="Toggle Table of Contents"
> >