fix: breadcrumb action buttons always right-aligned

Add ml-auto to the BreadcrumbActions container so buttons stay
anchored to the right regardless of whether the title is visible
(display:none when at top of note, display:flex when scrolled).

Previously, buttons shifted from left to right when scrolling
because the hidden title div wasn't taking up flex space.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Test
2026-04-03 16:01:43 +02:00
parent 83dad79692
commit b786b2a4cb
2 changed files with 10 additions and 1 deletions

View File

@@ -146,6 +146,15 @@ describe('BreadcrumbBar — title in breadcrumb (always rendered, CSS-toggled)',
})
})
describe('BreadcrumbBar — action buttons always right-aligned', () => {
it('actions container has ml-auto so buttons are always right-aligned', () => {
const { container } = render(<BreadcrumbBar entry={baseEntry} {...defaultProps} />)
const actions = container.querySelector('.breadcrumb-bar__actions')
expect(actions).toBeInTheDocument()
expect(actions).toHaveClass('ml-auto')
})
})
describe('BreadcrumbBar — raw editor toggle', () => {
it('shows Raw editor button with tooltip "Raw editor" when rawMode is off', () => {
const onToggleRaw = vi.fn()

View File

@@ -61,7 +61,7 @@ function BreadcrumbActions({ entry, showDiffToggle, diffMode, diffLoading, onTog
onToggleFavorite, onTrash, onRestore, onArchive, onUnarchive,
}: Omit<BreadcrumbBarProps, 'wordCount'>) {
return (
<div className="flex items-center" style={{ gap: 12 }}>
<div className="breadcrumb-bar__actions ml-auto flex items-center" style={{ gap: 12 }}>
<button
className={cn(
"flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors",