From 8fc366c8c008f11d3288c014ec43ac03222ba85c Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 6 Jun 2026 03:23:04 +0200
Subject: [PATCH] fix: scope math block selection highlight

---
 src/components/EditorTheme.css            | 11 ++++++++++-
 src/components/editorSchema.math.test.tsx | 13 +++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/EditorTheme.css b/src/components/EditorTheme.css
index b34294a2..38019d6e 100644
--- a/src/components/EditorTheme.css
+++ b/src/components/EditorTheme.css
@@ -292,11 +292,20 @@
 }
 
 .editor__blocknote-container .math-block-shell {
-  width: 100%;
+  max-width: 100%;
   overflow-x: auto;
   padding: 6px 0;
 }
 
+.editor__blocknote-container .math-block-shell:not(.math-block-shell--editing) {
+  width: fit-content;
+  margin-inline: auto;
+}
+
+.editor__blocknote-container .math-block-shell--editing {
+  width: 100%;
+}
+
 .editor__blocknote-container .math-block-source::selection {
   background: var(--colors-selection);
   color: var(--colors-text);
diff --git a/src/components/editorSchema.math.test.tsx b/src/components/editorSchema.math.test.tsx
index 72f3f742..2b46a3d4 100644
--- a/src/components/editorSchema.math.test.tsx
+++ b/src/components/editorSchema.math.test.tsx
@@ -1,3 +1,4 @@
+import { readFileSync } from 'node:fs'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import { MathBlockEditor } from './editorSchema'
@@ -73,4 +74,16 @@ describe('MathBlockEditor', () => {
     expect(source).not.toHaveClass('selection:text-primary-foreground')
     expect(source).not.toHaveClass('focus-visible:ring-[3px]')
   })
+
+  it('keeps display math selection chrome scoped to the rendered formula width', () => {
+    const editorThemeCss = readFileSync(`${process.cwd()}/src/components/EditorTheme.css`, 'utf8')
+
+    expect(editorThemeCss).toContain('.editor__blocknote-container .math-block-shell {')
+    expect(editorThemeCss).toContain('max-width: 100%;')
+    expect(editorThemeCss).toContain('.editor__blocknote-container .math-block-shell:not(.math-block-shell--editing) {')
+    expect(editorThemeCss).toContain('width: fit-content;')
+    expect(editorThemeCss).toContain('margin-inline: auto;')
+    expect(editorThemeCss).toContain('.editor__blocknote-container .math-block-shell--editing {')
+    expect(editorThemeCss).toContain('width: 100%;')
+  })
 })