From a04ad0094fa25aac93630dbee2455f787224f5d9 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Sat, 5 Sep 2026 00:28:50 +0200
Subject: [PATCH] fix(css): an icon-only grid button centres its icon again

Obsidian styles every `button` with `justify-content: center`, so the reset
answers with `flex-start` - which also lands on a grid button and overrides
the inline half of its `place-items: center`. The rail's connection dot came
out pinned 12px left of centre inside its own hit area.
---
 src/tailwind.css     | 6 ++++++
 tests/styles.test.ts | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/tailwind.css b/src/tailwind.css
index a9c1e2c..fddfee9 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -201,6 +201,12 @@
   cursor: pointer;
 }
 
+/* A grid button centres by `place-items`, which the rule above would override
+   for its inline axis: an icon-only button ends up pinned to its left edge. */
+.beaver-root.beaver-root button:is(.grid, .inline-grid) {
+  justify-content: initial;
+}
+
 .beaver-root.beaver-root button:hover {
   background: transparent;
 }
diff --git a/tests/styles.test.ts b/tests/styles.test.ts
index 837a79c..1ed83cd 100644
--- a/tests/styles.test.ts
+++ b/tests/styles.test.ts
@@ -89,4 +89,12 @@ describe("cascade against Obsidian", () => {
     expect(source).not.toMatch(/@import "tailwindcss"\s*[;l]/);
     expect(source).not.toMatch(/@import\s+"tailwindcss\/preflight/);
   });
+
+  // Obsidian's own `button` rules are what the reset answers, but a grid
+  // button must keep centring itself or an icon-only one drifts left.
+  it("leaves grid buttons to their own placement", () => {
+    expect(source).toMatch(
+      /button:is\(\.grid, \.inline-grid\) \{\s*justify-content: initial/
+    );
+  });
 });