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",