From 898f667c61c91919fe4a9c9af64942dc5412b590 Mon Sep 17 00:00:00 2001 From: serafin-garcia Date: Wed, 22 Jul 2026 10:15:43 -0700 Subject: [PATCH] fix(open-knowledge): shadcn lint fix button and settings search borders (#2838) The Fix button in the editor lint hover popup now gets its styling from the shared shadcn buttonVariants recipe instead of hand-rolled CSS on Fumadocs tokens, so it matches every other primary button. The class ok-lint-tooltip-fix stays as a bare selector hook for tests plus the hidden-attribute guard. The settings sidebar search previously drew a border box around the whole cmdk surface, doubling up with the input wrapper's stock border-b at the box bottom. The input wrapper is now boxed like a shadcn Input and the results list gets the PopoverContent panel treatment, matching the app's other Command dropdowns (NewItemDialog, code block language picker, icon picker). PRD-7524 GitOrigin-RevId: 666b53e1c2fe0bc8fb576e44d98129cc6aeed422 --- .changeset/lint-ux-style-polish.md | 5 +++++ .../components/settings/SettingsDialogShell.tsx | 10 +++++++--- .../extensions/markdown-lint-decorations.ts | 11 ++++++++++- packages/app/src/globals.css | 17 +++++------------ 4 files changed, 27 insertions(+), 16 deletions(-) create mode 100644 .changeset/lint-ux-style-polish.md diff --git a/.changeset/lint-ux-style-polish.md b/.changeset/lint-ux-style-polish.md new file mode 100644 index 000000000..39efcb952 --- /dev/null +++ b/.changeset/lint-ux-style-polish.md @@ -0,0 +1,5 @@ +--- +"@inkeep/open-knowledge": patch +--- + +Style polish on the lint UX: the Fix button in the editor's lint hover popup now uses the standard button styling instead of a one-off look, and the settings sidebar search matches the app's other search boxes — a single clean border around the input (no doubled bottom edge) with results listed flush below it. diff --git a/packages/app/src/components/settings/SettingsDialogShell.tsx b/packages/app/src/components/settings/SettingsDialogShell.tsx index 8e08d6149..1adddd2c0 100644 --- a/packages/app/src/components/settings/SettingsDialogShell.tsx +++ b/packages/app/src/components/settings/SettingsDialogShell.tsx @@ -366,16 +366,20 @@ function SettingsSidebar({ {/* cmdk surface wraps ONLY the search input + results — its roving focus never touches the plain-button group nav below (which keeps its aria-current + disabled-group semantics). The popover-styled base - classes are reset so it sits flush as a plain sidebar search box. */} + classes are reset; the input wrapper is boxed like a shadcn Input + (its stock border-b divider only ever bordered the box bottom here) + and the results render flush on the sidebar background, like the + group nav they replace while searching. */} {/* Polite result-count announcement — cmdk's listbox semantics don't @@ -385,7 +389,7 @@ function SettingsSidebar({ {query !== '' ? : null} {query !== '' ? ( - + No settings found diff --git a/packages/app/src/editor/extensions/markdown-lint-decorations.ts b/packages/app/src/editor/extensions/markdown-lint-decorations.ts index 9546b3688..c47dd8ebc 100644 --- a/packages/app/src/editor/extensions/markdown-lint-decorations.ts +++ b/packages/app/src/editor/extensions/markdown-lint-decorations.ts @@ -42,11 +42,13 @@ import type { Node as PmNode } from '@tiptap/pm/model'; import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'; import { Decoration, DecorationSet } from '@tiptap/pm/view'; import { LINT_NAV_EVENT, type LintNavDetail } from '@/components/ProblemsPanel'; +import { buttonVariants } from '@/components/ui/button'; import { collectFixes, LINT_SOURCE_FIXED_EVENT } from '@/editor/apply-lint-fix'; import { clearPendingSourceNavigation, peekPendingSourceNavigation, } from '@/editor/source-editor-navigation'; +import { cn } from '@/lib/utils'; import { fetchEffectiveLintConfig, subscribeToLintConfigChanged } from '../lint-config-client'; const markdownLintDecorationKey = new PluginKey('markdownLintDecorations'); @@ -212,7 +214,14 @@ function createLintTooltip( tooltip.appendChild(message); const fixButton = document.createElement('button'); fixButton.type = 'button'; - fixButton.className = 'ok-lint-tooltip-fix'; + // Styled by the shared shadcn button recipe so the imperative tooltip matches + // React surfaces; `ok-lint-tooltip-fix` is a bare selector hook (tests + + // the [hidden] guard in globals.css), not a styling class. + fixButton.className = cn( + 'ok-lint-tooltip-fix', + buttonVariants({ variant: 'default', size: 'xs' }), + 'mt-1 self-start', + ); fixButton.hidden = true; tooltip.appendChild(fixButton); // Body-appended, viewport-fixed: positioned by floating-ui against a virtual diff --git a/packages/app/src/globals.css b/packages/app/src/globals.css index c217b0334..640b7deab 100644 --- a/packages/app/src/globals.css +++ b/packages/app/src/globals.css @@ -5276,18 +5276,11 @@ html.electron-mode [data-slot="sidebar-inner"] { .ok-lint-tooltip-message { white-space: pre-line; } -.ok-lint-tooltip-fix { - align-self: flex-start; - margin-top: 0.25rem; - padding: 0.125rem 0.5rem; - border-radius: 0.25rem; - font-weight: 600; - cursor: pointer; - color: var(--color-fd-primary-foreground, #fff); - background: var(--color-fd-primary, oklch(55% 0.2 255)); -} -.ok-lint-tooltip-fix:hover { - filter: brightness(1.08); +/* Fix button styling comes from the shadcn buttonVariants recipe applied in + markdown-lint-decorations.ts; this guard keeps the recipe's inline-flex from + overriding the `hidden` attribute on the imperative DOM element. */ +.ok-lint-tooltip-fix[hidden] { + display: none; } .ok-lint-tooltip[hidden] { display: none;