From b786b2a4cbc91d3c50f3d8d7a7fe4e6839c8cafe Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Fri, 3 Apr 2026 16:01:43 +0200
Subject: [PATCH] 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>
---
 src/components/BreadcrumbBar.test.tsx | 9 +++++++++
 src/components/BreadcrumbBar.tsx      | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/BreadcrumbBar.test.tsx b/src/components/BreadcrumbBar.test.tsx
index 77fbc76f..d9401765 100644
--- a/src/components/BreadcrumbBar.test.tsx
+++ b/src/components/BreadcrumbBar.test.tsx
@@ -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()
diff --git a/src/components/BreadcrumbBar.tsx b/src/components/BreadcrumbBar.tsx
index 3fc1e5fb..f1eec40b 100644
--- a/src/components/BreadcrumbBar.tsx
+++ b/src/components/BreadcrumbBar.tsx
@@ -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",