behaviour settings changed

packages/web/src/settings/BehaviourSettings.svelte

@@ -1,27 +1,31 @@
 <script lang="ts">
-    import FormCheckboxField from "../forms/FormCheckboxField.svelte";
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
-    import { _t } from "../translations";
+  import { _t } from '../translations';
   import FontIcon from '../icons/FontIcon.svelte';
-    import FormValues from "../forms/FormValues.svelte";
+  import FormValues from '../forms/FormValues.svelte';
 </script>
 
 <div class="wrapper">
   <FormValues let:values>
     <div class="heading">{_t('settings.behaviour', { defaultMessage: 'Behaviour' })}</div>
 
-    <FormCheckboxField
-    name="behaviour.useTabPreviewMode"
-    label={_t('settings.behaviour.useTabPreviewMode', { defaultMessage: 'Use tab preview mode' })}
-    defaultValue={true}
-    data-testid="BehaviourSettings_useTabPreviewMode"
-    />
-
     <FormCheckboxField
       name="behaviour.jsonPreviewWrap"
       label={_t('settings.behaviour.jsonPreviewWrap', { defaultMessage: 'Wrap JSON in preview' })}
       defaultValue={false}
     />
 
+    <FormCheckboxField
+      name="behaviour.openDetailOnArrows"
+      label={_t('settings.behaviour.openDetailOnArrows', {
+        defaultMessage: 'Open detail on keyboard navigation',
+      })}
+      defaultValue={true}
+      disabled={values['behaviour.useTabPreviewMode'] === false}
+    />
+
+    <div class="heading">{_t('settings.tabPreviewMode', { defaultMessage: 'Tab Preview Mode' })}</div>
+
     <div class="tip">
       <FontIcon icon="img tip" />
       {_t('settings.behaviour.singleClickPreview', {
@@ -31,12 +35,10 @@
     </div>
 
     <FormCheckboxField
-    name="behaviour.openDetailOnArrows"
+      name="behaviour.useTabPreviewMode"
-    label={_t('settings.behaviour.openDetailOnArrows', {
+      label={_t('settings.behaviour.useTabPreviewMode', { defaultMessage: 'Use tab preview mode' })}
-        defaultMessage: 'Open detail on keyboard navigation',
-    })}
       defaultValue={true}
-    disabled={values['behaviour.useTabPreviewMode'] === false}
+      data-testid="BehaviourSettings_useTabPreviewMode"
     />
 
     <div class="heading">{_t('settings.confirmations', { defaultMessage: 'Confirmations' })}</div>