fix(open-knowledge): shadcn lint fix button and settings search borders (#2838)

.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.

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. */}
       <Command
         shouldFilter={false}
-        className="h-auto w-full shrink-0 rounded-md border bg-transparent sm:mb-3"
+        className="h-auto w-full shrink-0 bg-transparent sm:mb-3 [&_[data-slot=command-input-wrapper]]:h-9 [&_[data-slot=command-input-wrapper]]:rounded-lg [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-input"
         data-testid="settings-search"
       >
         <CommandInput
           value={searchQuery}
           onValueChange={onSearchChange}
           placeholder={t`Search settings`}
+          className="py-0"
           data-testid="settings-search-input"
         />
         {/* Polite result-count announcement — cmdk's listbox semantics don't
@@ -385,7 +389,7 @@ function SettingsSidebar({
           {query !== '' ? <Plural value={results.length} one="# result" other="# results" /> : null}
         </span>
         {query !== '' ? (
-          <CommandList data-testid="settings-search-results">
+          <CommandList data-testid="settings-search-results" className="mt-1.5">
             <CommandEmpty data-testid="settings-search-empty">
               <Trans>No settings found</Trans>
             </CommandEmpty>

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<DecorationSet>('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

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;