diff --git a/src/client/sidebar.module.css b/src/client/sidebar.module.css
index f509375..6737ad2 100644
--- a/src/client/sidebar.module.css
+++ b/src/client/sidebar.module.css
@@ -1004,8 +1004,16 @@ body[data-dsh-sidebar-dragging] .bottomPanel {
 }
 
 /* The hover-revealed @-reference button at the row's far right (and the
-   transient "copied" label that replaces it after a copy). Hidden rows
-   keep the name at full width; hovering or focusing the row reveals it. */
+   transient "copied" label that replaces it after a copy). The only auto
+   margin in the row absorbs the filename's spare width, so a short name
+   cannot leave either affordance stranded in the middle. */
+.explorerRef,
+.explorerCopied {
+  margin-left: auto;
+}
+
+/* Hidden rows keep the name at full width; hovering or focusing the row
+   reveals the reference button. */
 .explorerRef {
   flex: none;
   display: none;
diff --git a/tests/file-tree-reference-tail.spec.ts b/tests/file-tree-reference-tail.spec.ts
new file mode 100644
index 0000000..17f61db
--- /dev/null
+++ b/tests/file-tree-reference-tail.spec.ts
@@ -0,0 +1,17 @@
+/**
+ * The @-reference button and its transient copied label share a file-tree
+ * row with a shrinking filename. Both need the row's only auto margin so a
+ * short filename cannot leave the affordance stranded in the middle.
+ */
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const css = readFileSync('src/client/sidebar.module.css', 'utf8')
+
+describe('FileTree @-reference row tail', () => {
+  it('anchors both mutually-exclusive reference affordances after a short filename', () => {
+    const rule = css.match(/\.explorerRef,\s*\.explorerCopied\s*\{([\s\S]*?)\n\}/)?.[1]
+    expect(rule).toBeDefined()
+    expect(rule).toMatch(/margin-left:\s*auto/)
+  })
+})