Skip to content

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

Merged
michaelpporter merged 1 commit into
734-bug-tree-view-fails-for-links-with-block-referencesfrom
736-fr-move-the-buttons-to-the-up-right-in-tree-view-code-block
Jul 25, 2026
Merged

fix(codeblock-tree): float the copy button in the top-right corner#739
michaelpporter merged 1 commit into
734-bug-tree-view-fails-for-links-with-block-referencesfrom
736-fr-move-the-buttons-to-the-up-right-in-tree-view-code-block

Conversation

@michaelpporter

Copy link
Copy Markdown
Owner

Refs #736 — intentionally not an auto-closing keyword; the issue is closed when the fix ships in a release.

Stacked on #738 (which is stacked on #737). GitHub retargets it to main as those merge, so merge in order: #737#738 → this.

What's actually wrong

This came in as a feature request ("can the buttons move to the top-right?"), but it's a bug. CodeblockTree.svelte already asked for a floating button:

<div class="absolute bottom-2 right-2 flex">

src/styles.css imports only tailwindcss/utilities. In Tailwind v4 the numeric --spacing scale lives in the theme layer, so bottom-2, right-2 and the pr-10 content padding have nothing to resolve to and are dropped at build time — verified, they're absent from the compiled styles.css while .absolute and .flex are present.

An absolutely positioned element with no insets sits at its static position: the top-left of .BC-codeblock-tree-items, directly over the first row's collapse arrow. That's exactly what the reporter's screenshot shows.

Fix

Positioning is now plain CSS against Obsidian's own size variables, so it doesn't depend on the missing Tailwind scale:

.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;
}

.BC-codeblock-tree-content { padding-right: var(--size-4-10, 2.5rem); }

--size-4-2 is already used elsewhere in this repo. --size-4-10 isn't, and I couldn't verify it from the packaged app, so it carries an explicit 2.5rem fallback — a silently-missing value is precisely what caused this bug.

Verified the rules survive the build rather than trusting the source:

.BC-codeblock-tree-buttons{top:var(--size-4-2);right:var(--size-4-2);z-index:1;display:flex;position:absolute}
.BC-codeblock-tree-items{position:relative}
.BC-codeblock-tree-content{padding-right:var(--size-4-10,2.5rem)}

Deliberately out of scope

The root cause is repo-wide: 99 spacing-utility usages across 15 files currently compile to nothing. Fixing it (@import "tailwindcss/theme" layer(theme);) would produce an unverified visual diff everywhere at once, so it's left for its own PR.

Worth noting the Mermaid and Markmap codeblocks are broken the same way — they use left-2 top-2, so losing the offsets leaves them near where they belong and the damage isn't obvious. They're untouched here.

bun run build && bun run test pass (379 tests, 0 type errors).

The button asked for `absolute bottom-2 right-2`, but src/styles.css
imports only `tailwindcss/utilities` — in Tailwind v4 the numeric
spacing scale lives in the theme layer, so `bottom-2`, `right-2` and
the `pr-10` content padding all compiled to nothing. An absolutely
positioned element with no insets sits at its static position, putting
the button over the first row's collapse arrow.

Positions the button (and the row padding that keeps note flair clear
of it) with plain CSS against Obsidian's --size-4-* variables, so it no
longer depends on the missing Tailwind scale.

Scoped to the tree codeblock. The wider problem — 99 spacing utilities
across 15 files silently compiling to nothing — is left untouched here.

Refs #736
@michaelpporter
michaelpporter merged commit 219d60a into 734-bug-tree-view-fails-for-links-with-block-references Jul 25, 2026
@michaelpporter
michaelpporter deleted the 736-fr-move-the-buttons-to-the-up-right-in-tree-view-code-block branch July 25, 2026 15:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant