From fbea7711d3d054730ef19caad6abc3d72e62c59d Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Mon, 3 Aug 2026 13:24:38 +0700
Subject: [PATCH] Reduce corner radius for markdown mode-switcher and atom pill

Drop the border radius 2px on the RichMarkdown editing UI's
Compose/Source/Preview mode-switcher (trigger and menu) and on the inline
atom card pill, and tighten the mode-switcher menu row height. Scoped
locally via the form-control radius token so other selects, buttons, and
inputs are unaffected.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/base/codemirror-editor.gts              |  3 ++-
 .../components/markdown-editor-mode-select.gts   | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/base/codemirror-editor.gts b/packages/base/codemirror-editor.gts
index 3b7bfa838a7..52275af065f 100644
--- a/packages/base/codemirror-editor.gts
+++ b/packages/base/codemirror-editor.gts
@@ -1649,7 +1649,8 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
           gap: 4px;
           background-color: var(--boxel-100, #f0f0f0);
           border: 1px solid var(--boxel-border-color, #c4c4c4);
-          border-radius: var(--boxel-border-radius, 4px);
+          /* 2px less rounded than the default: the atom pill read too round. */
+          border-radius: calc(var(--boxel-border-radius, 4px) - 2px);
           padding: 1px 6px;
           font-size: 0.85em;
           cursor: pointer;
diff --git a/packages/base/components/markdown-editor-mode-select.gts b/packages/base/components/markdown-editor-mode-select.gts
index d1fdc6340af..b4f8203a614 100644
--- a/packages/base/components/markdown-editor-mode-select.gts
+++ b/packages/base/components/markdown-editor-mode-select.gts
@@ -64,6 +64,11 @@ export default class MarkdownEditorModeSelect extends GlimmerComponent<Signature
 
     <style scoped>
       .markdown-editor-mode-select {
+        /* Trim the trigger's corners: the default form-control radius reads a
+           touch too rounded here, so drop it 2px (scoped to this select). */
+        --boxel-form-control-border-radius: calc(
+          var(--boxel-border-radius) - 2px
+        );
         /* Compact the trigger: tight padding and a small label↔caret gap,
            via the BoxelSelect trigger tokens. */
         --boxel-select-trigger-padding: var(--boxel-sp-5xs) var(--boxel-sp-xxs);
@@ -91,9 +96,20 @@ export default class MarkdownEditorModeSelect extends GlimmerComponent<Signature
     {{! template-lint-disable require-scoped-style }}
     <style>
       .boxel-select__dropdown.markdown-editor-mode-select-dropdown {
+        /* Match the trigger: 2px less rounded than the default menu radius. */
+        --boxel-form-control-border-radius: calc(
+          var(--boxel-border-radius) - 2px
+        );
         width: max-content;
         min-width: 7rem;
       }
+      /* Shorter rows: tighten the vertical padding so the menu reads less tall.
+         (0,3,0) specificity wins over BoxelSelect's own row rules regardless of
+         stylesheet order. */
+      .boxel-select__dropdown.markdown-editor-mode-select-dropdown
+        .boxel-select-option-item {
+        padding-block: var(--boxel-sp-3xs);
+      }
       .markdown-editor-mode-select-dropdown .boxel-select-option-text {
         white-space: nowrap;
       }