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.
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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/
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user