fix(codeblock-tree): float the copy button in the top-right corner

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+* The tree codeblock's copy button now floats in the top-right corner ([#736](https://github.com/michaelpporter/breadcrumbs/issues/736)). It was rendering over the first row's collapse arrow: the button is positioned with Tailwind utilities, but this plugin imports only Tailwind's utilities layer, so the numeric spacing scale it needs is unavailable and the offsets compiled to nothing — leaving the button at its static top-left position. Its placement (and the row padding that keeps note flair clear of it) is now written as plain CSS against Obsidian's own size variables.
 * Links with a block or heading reference now point at the note itself ([#734](https://github.com/michaelpporter/breadcrumbs/issues/734)). `down:: [[2#^71f2d9]]` in `1.md` used to create an edge to a phantom `2#^71f2d9.md` node, so `1.md`'s tree looked right while `2.md` never showed `1.md` as its parent. The subpath is now stripped before resolving, for both frontmatter and inline fields and in list notes, and regardless of which folders the notes live in. A subpath-only link (`[[#^71f2d9]]`, pointing inside the same note) creates no edge.
 * Inline Dataview fields no longer claim links that sit outside them ([#731](https://github.com/michaelpporter/breadcrumbs/issues/731)). `(down:: [[y]]) [[x]]` in `x.md` used to make **both** `[[y]]` and `[[x]]` `down` children — including a self-loop from the note to itself — because the builder attributed every link on a line to whichever field opened that line. Bracketed fields now end at their closing bracket, matching Dataview, so only `[[y]]` becomes an edge and links elsewhere on the line stay ordinary prose. Multiple fields on one line (`(up:: [[p]]) (down:: [[c]])`) are also parsed separately now. Bare line-level fields (`down:: [[y]], [[x]]`) are unchanged — their value is still the rest of the line.
 

src/components/codeblocks/CodeblockTree.svelte

@@ -120,8 +120,8 @@
 	{/if}
 
 	{#if data && !data.is_empty()}
-		<div class="BC-codeblock-tree-items relative">
-			<div class="absolute bottom-2 right-2 flex">
+		<div class="BC-codeblock-tree-items">
+			<div class="BC-codeblock-tree-buttons">
 				<CopyToClipboardButton
 					cls="clickable-icon nav-action-button"
 					text={() =>
@@ -141,7 +141,7 @@
 			</div>
 
 			<!-- NOTE: Padded so that the flair doesn't interfere with the floating buttons -->
-			<div class="pr-10">
+			<div class="BC-codeblock-tree-content">
 				<NestedEdgeList
 					{plugin}
 					{node_stringify_options}

src/styles.css

@@ -163,6 +163,28 @@ Outputs to /styles.css, for Obsidian to use.
 	width: 100%;
 }
 
+/* Float the tree codeblock's copy button in the top-right corner.
+   Written by hand rather than with Tailwind's `top-2 right-2`: this repo
+   imports only `tailwindcss/utilities`, so the numeric spacing scale (which
+   lives in the theme layer) is unavailable and those utilities compile to
+   nothing — leaving the button at its static position, over the first row. */
+.BC-codeblock-tree-items {
+	position: relative;
+}
+
+.BC-codeblock-tree-buttons {
+	position: absolute;
+	top: var(--size-4-2);
+	right: var(--size-4-2);
+	z-index: 1;
+	display: flex;
+}
+
+/* Keep tree rows (and their flair) clear of the floating button */
+.BC-codeblock-tree-content {
+	padding-right: var(--size-4-10, 2.5rem);
+}
+
 /* markmap node text — inherit Obsidian's theme colour so dark mode is readable */
 .BC-codeblock-markmap svg foreignObject div {
 	color: var(--text-normal);