From 4682255d5f1c274c97678e62b7ca04e0b7b39e29 Mon Sep 17 00:00:00 2001
From: Stela Augustinova <augustinovast@gmail.com>
Date: Mon, 15 Dec 2025 13:02:11 +0100
Subject: [PATCH] Refactor SQL editor settings layout and update word wrap
 field type

---
 .../web/src/settings/SQLEditorSettings.svelte | 72 +++++++++----------
 1 file changed, 34 insertions(+), 38 deletions(-)

diff --git a/packages/web/src/settings/SQLEditorSettings.svelte b/packages/web/src/settings/SQLEditorSettings.svelte
index a3740d3e9..38eef6a8f 100644
--- a/packages/web/src/settings/SQLEditorSettings.svelte
+++ b/packages/web/src/settings/SQLEditorSettings.svelte
@@ -15,8 +15,6 @@
 <div class="wrapper">
     <div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
 
-<div class="flex">
-<div class="col-3">
     <FormSelectField
     label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
     name="sqlEditor.sqlCommandsCase"
@@ -28,8 +26,6 @@
     ]}
     data-testid="SQLEditorSettings_sqlCommandsCase"
     />
-</div>
-<div class="col-3">
     <FormFieldTemplateLarge
     label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
     type="combo"
@@ -42,53 +38,49 @@
         on:change={e => ($currentEditorKeybindigMode = e.detail)}
     />
     </FormFieldTemplateLarge>
-</div>
-<div class="col-3">
     <FormFieldTemplateLarge
     label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
-    type="combo"
+    type="checkbox"
     >
     <CheckboxField
         checked={$currentEditorWrapEnabled}
         on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
     />
     </FormFieldTemplateLarge>
-</div>
-</div>
 
-<FormTextField
-name="sqlEditor.limitRows"
-label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
-placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
-/>
+    <FormTextField
+    name="sqlEditor.limitRows"
+    label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
+    placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
+    />
 
-<FormCheckboxField
-name="sqlEditor.showTableAliasesInCodeCompletion"
-label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
-    defaultMessage: 'Show table aliases in code completion',
-})}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.showTableAliasesInCodeCompletion"
+    label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
+        defaultMessage: 'Show table aliases in code completion',
+    })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.disableSplitByEmptyLine"
-label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.disableSplitByEmptyLine"
+    label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.disableExecuteCurrentLine"
-label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
-    defaultMessage: 'Disable current line execution (Execute current)',
-})}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.disableExecuteCurrentLine"
+    label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
+        defaultMessage: 'Disable current line execution (Execute current)',
+    })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.hideColumnsPanel"
-label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.hideColumnsPanel"
+    label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
+    defaultValue={false}
+    />
 </div>
 
 <style>
@@ -102,4 +94,8 @@ defaultValue={false}
   .wrapper :global(input){
     max-width: 400px;
   }
+
+  .wrapper :global(select) {
+    max-width: 400px;
+  }
 </style>
\ No newline at end of file