fix(ui): apply corner style to remaining controls

apps/desktop/src/components/editor/EditorSearchPanel.vue

@@ -493,7 +493,7 @@ defineExpose({
 .editor-search-panel--editor {
   background: #f6f7f9;
   border-color: #d8dce3;
-  border-radius: 6px;
+  border-radius: var(--dbx-radius-fixed-6);
   box-shadow:
     0 8px 22px rgb(15 23 42 / 0.14),
     0 1px 0 rgb(255 255 255 / 0.78) inset;
@@ -537,7 +537,7 @@ defineExpose({
 .editor-search-panel--editor :deep(.border-input) {
   background: #ffffff;
   border-color: #c7ccd5;
-  border-radius: 5px;
+  border-radius: var(--dbx-radius-fixed-5);
   box-shadow: 0 1px 0 rgb(15 23 42 / 0.03) inset;
 }
 

apps/desktop/src/components/editor/EditorSettingsDialog.vue

@@ -112,7 +112,7 @@ import ChangelogPanel from "@/components/settings/ChangelogPanel.vue";
 import McpConnectionScopePicker from "@/components/settings/McpConnectionScopePicker.vue";
 import ScheduledDatabaseBackupSettings from "@/components/backup/ScheduledDatabaseBackupSettings.vue";
 import SqlFormatterSettingsPanel from "./SqlFormatterSettingsPanel.vue";
-import { APP_THEME_PALETTES, type AppThemeAppearance, type AppThemeMode, type AppThemePalette } from "@/lib/app/appTheme";
+import { APP_THEME_PALETTES, type AppCornerStyle, type AppThemeAppearance, type AppThemeMode, type AppThemePalette } from "@/lib/app/appTheme";
 import { editorSettingsDraftChanged, editorSettingsDraftFromSettings, editorSettingsPatchFromDraft, normalizeTableOpenPageSizeDraft, type EditorSettingsDraft } from "@/lib/settings/editorSettingsDraft";
 import { useConnectionStore } from "@/stores/connectionStore";
 import { useSavedSqlStore } from "@/stores/savedSqlStore";
@@ -137,7 +137,7 @@ const connectionStore = useConnectionStore();
 const savedSqlStore = useSavedSqlStore();
 const promptTemplateStore = usePromptTemplateStore();
 const tunnelProfileStore = useTunnelProfileStore();
-const { isDark, themeMode, themePalette, setThemeMode, setThemePalette } = useTheme();
+const { isDark, themeMode, themePalette, cornerStyle, setThemeMode, setThemePalette, setCornerStyle } = useTheme();
 
 const appThemePaletteOptions = computed(
   (): Array<{ value: AppThemePalette; label: string; previewColor: string }> =>
@@ -154,6 +154,11 @@ const appThemeModeOptions = computed(() => [
   { value: "dark" as AppThemeMode, label: t("toolbar.themeDark"), icon: Moon },
   { value: "system" as AppThemeMode, label: t("toolbar.themeSystem"), icon: SunMoon },
 ]);
+const appCornerStyleOptions = computed(() => [
+  { value: "none" as AppCornerStyle, label: t("settings.cornerStyleNone"), previewRadius: "0px" },
+  { value: "small" as AppCornerStyle, label: t("settings.cornerStyleSmall"), previewRadius: "4px" },
+  { value: "large" as AppCornerStyle, label: t("settings.cornerStyleLarge"), previewRadius: "10px" },
+]);
 
 const props = defineProps<{
   open?: boolean;
@@ -3630,22 +3635,43 @@ onUnmounted(cleanupPreviewEditor);
                 </div>
               </div>
 
-              <div class="settings-appearance-group">
-                <Label>{{ t("settings.theme") }}</Label>
-                <div class="settings-appearance-button-row flex flex-wrap gap-2">
-                  <Button
-                    v-for="option in appThemeModeOptions"
-                    :key="option.value"
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    class="settings-choice-button h-8 gap-1.5 rounded-[6px] px-3"
-                    :class="themeMode === option.value ? 'settings-choice-button--selected border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
-                    @click="setThemeMode(option.value)"
-                  >
-                    <component :is="option.icon" class="h-3.5 w-3.5" />
-                    {{ option.label }}
-                  </Button>
+              <div class="settings-appearance-theme-grid">
+                <div class="settings-appearance-group min-w-0">
+                  <Label>{{ t("settings.theme") }}</Label>
+                  <div class="settings-appearance-button-row flex flex-wrap gap-2">
+                    <Button
+                      v-for="option in appThemeModeOptions"
+                      :key="option.value"
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      class="settings-choice-button h-8 gap-1.5 px-3"
+                      :class="themeMode === option.value ? 'settings-choice-button--selected border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
+                      @click="setThemeMode(option.value)"
+                    >
+                      <component :is="option.icon" class="h-3.5 w-3.5" />
+                      {{ option.label }}
+                    </Button>
+                  </div>
+                </div>
+
+                <div class="settings-appearance-group min-w-0">
+                  <Label>{{ t("settings.cornerStyle") }}</Label>
+                  <div class="settings-appearance-button-row flex flex-wrap gap-2">
+                    <Button
+                      v-for="option in appCornerStyleOptions"
+                      :key="option.value"
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      class="settings-choice-button h-8 px-3"
+                      :class="cornerStyle === option.value ? 'settings-choice-button--selected border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
+                      :style="{ borderRadius: option.previewRadius }"
+                      @click="setCornerStyle(option.value)"
+                    >
+                      {{ option.label }}
+                    </Button>
+                  </div>
                 </div>
               </div>
 
@@ -5855,12 +5881,19 @@ onUnmounted(cleanupPreviewEditor);
   gap: 0.625rem;
 }
 
+.settings-appearance-theme-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
 .settings-option-stack > * + * {
   margin-top: 0.625rem;
 }
 
 @media (max-width: 760px) {
   .settings-appearance-top-grid,
+  .settings-appearance-theme-grid,
   .settings-appearance-choice-grid {
     grid-template-columns: 1fr;
   }

apps/desktop/src/components/editor/QueryEditor.vue

@@ -4370,7 +4370,7 @@ defineExpose({
   margin: 0;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--dbx-radius-fixed-6);
   vertical-align: middle;
   white-space: nowrap;
   transition:
@@ -4417,7 +4417,7 @@ defineExpose({
   margin: 0;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--dbx-radius-fixed-6);
   background: transparent;
   color: transparent;
   vertical-align: middle;

apps/desktop/src/components/editor/__tests__/EditorSearchPanel.spec.ts

@@ -0,0 +1,10 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const editorSearchPanelSource = readFileSync(new URL("../EditorSearchPanel.vue", import.meta.url), "utf8");
+
+describe("EditorSearchPanel corner style", () => {
+  it("uses the configurable five-pixel radius token for editor inputs", () => {
+    expect(editorSearchPanelSource).toContain("border-radius: var(--dbx-radius-fixed-5);");
+  });
+});