Skip to content

Reduce rounded corner radius for markdown dropdown bars and atom cards #5672

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FadhlanR wants to merge 1 commit into
base: main
Choose a base branch
from
+18 −1
Open

Reduce rounded corner radius for markdown dropdown bars and atom cards #5672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/base/codemirror-editor.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Comment on lines +1652 to +1653

@FadhlanR FadhlanR Aug 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Claude Code 🤖] Confirmation — the hover overlay ring follows this change automatically. The overlay that draws the outline around a hovered atom (packages/host/app/components/operator-mode/overlays.gts, the offset middleware) mirrors getComputedStyle(reference).borderRadius from the registered card element onto the floating overlay, and this slot span is that reference (it carries context.cardComponentModifier). So the ring tracks the reduced radius with no host-side change needed — the two won't drift.

Two small notes, neither blocking:

  • In a context where --boxel-border-radius is undefined, the fallback math lands at calc(4px - 2px) = 2px — proportionally a much bigger cut than 10px → 8px. In practice the token is always defined via boxel-ui's variables.css, and keeping the 4px fallback matches this file's convention, so this is fine as written.
  • If a theme sets --boxel-border-radius below 2px, the calc result goes negative and CSS clamps it to 0 at used-value time, so there's no invalid-declaration fallout.

padding: 1px 6px;
font-size: 0.85em;
cursor: pointer;
Expand Down
16 changes: 16 additions & 0 deletions packages/base/components/markdown-editor-mode-select.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
);
Comment on lines +99 to +102

@FadhlanR FadhlanR Aug 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Claude Code 🤖] Confirmation — this second token override is required, not redundant. It can look like the trigger-side --boxel-form-control-border-radius in the scoped block above should cover the menu too, but it can't reach it, for two reasons verified in packages/boxel-ui/addon/src/components/select/index.gts:

  • BoxelSelect's syncCustomProps() does copy --boxel-form-control-border-radius from the trigger's computed style onto the dropdown container — but startObservingTheme() early-returns when @renderInPlace is true (as it is for this select), so that JS sync never runs here.
  • With renderInPlace, the dropdown content renders as a sibling of the trigger element (which is what carries .markdown-editor-mode-select), not a descendant, so the custom property can't cascade into it either.

So this rule is the only path by which the menu's border-radius: var(--boxel-form-control-border-radius) (the .boxel-select__dropdown rule in select/index.gts's global style block) sees the reduced value. Setting it on the dropdown element itself also correctly beats both the :root default in variables.css and any CardContainer ancestor that re-sets the token, because a rule matching the element wins over inherited values.

This also stays correct if the select ever stops using renderInPlace: syncCustomProps would then copy the trigger's computed value — the same reduced radius — onto the portal'd dropdown as an inline style, so the two mechanisms agree. Nothing to change.

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);
}
Comment on lines +106 to +112

@FadhlanR FadhlanR Aug 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Claude Code 🤖] Confirmation — the specificity claim in this comment checks out. BoxelSelect's default row padding (padding: var(--boxel-sp-xxs) on .boxel-select-option-item in packages/boxel-ui/addon/src/components/select/index.gts) lives in a <style scoped> block, so glimmer-scoped-css rewrites it with a scoping attribute selector — effective specificity (0,2,0), which this (0,3,0) rule beats regardless of stylesheet order. The state-variant rules that do reach (0,3,0) after the rewrite (--selected, --highlighted) only set colors, never padding, so there is no order-dependent tie. Using padding-block (rather than the full shorthand) also correctly leaves the horizontal padding at the shared default. Nothing to change.

.markdown-editor-mode-select-dropdown .boxel-select-option-text {
white-space: nowrap;
}
Expand Down
Loading