feat: add jsonPreviewWrap option to settings

packages/web/src/jsontree/JSONTree.svelte

@@ -6,6 +6,7 @@
   import _ from 'lodash';
   import { copyTextToClipboard } from '../utility/clipboard';
   import { openJsonLinesData } from '../utility/openJsonLinesData';
+  import { useSettings } from '../utility/metadataLoaders';
 
   setContext('json-tree-context-key', {});
 
@@ -23,6 +24,9 @@
   export let isInserted = false;
   export let isModified = false;
 
+  const settings = useSettings();
+  $: wrap = $settings?.['behaviour.jsonPreviewWrap'];
+
   setContext('json-tree-default-expanded', expandAll);
   if (slicedKeyCount) setContext('json-tree-sliced-key-count', slicedKeyCount);
 
@@ -66,6 +70,7 @@
   class:isDeleted
   class:isInserted
   class:isModified
+  class:wrap
 >
   <JSONNode
     {key}
@@ -115,6 +120,9 @@
     list-style: none;
     white-space: nowrap;
   }
+  ul.wrap :global(li) {
+    white-space: normal;
+  }
   ul,
   ul :global(ul) {
     padding: 0;

packages/web/src/settings/SettingsModal.svelte

@@ -403,6 +403,12 @@ ORDER BY
 
           <FormCheckboxField name="behaviour.useTabPreviewMode" label="Use tab preview mode" defaultValue={true} />
 
+          <FormCheckboxField
+            name="behaviour.jsonPreviewWrap"
+            label={_t('settings.behaviour.jsonPreviewWrap', { defaultMessage: 'Wrap json in preview' })}
+            defaultValue={false}
+          />
+
           <div class="tip">
             <FontIcon icon="img tip" /> When you single-click or select a file in the "Tables, Views, Functions" view, it
             is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing