tool strip wrappable, table data commands moved from statusbar to toolstrip

packages/web/src/buttons/ToolStripButton.svelte

@@ -31,6 +31,7 @@
     align-self: stretch;
     display: flex;
     user-select: none;
+    margin: 2px 0px;
   }
   .button.disabled {
     color: var(--theme-font-3);

packages/web/src/buttons/ToolStripContainer.svelte

@@ -1,29 +1,29 @@
-<div class="toolstrip">
-  <slot name="toolstrip" />
-</div>
+<div class="wrapper">
+  <div class="content">
+    <slot />
+  </div>
 
-<div class="content">
-  <slot />
+  <div class="toolstrip">
+    <slot name="toolstrip" />
+  </div>
 </div>
 
 <style>
-  .content {
-    position: absolute;
-    left: 0;
-    top: 0;
-    border-bottom: 1px solid var(--theme-border);
-    right: 0;
-    bottom: var(--dim-toolstrip-height);
+  .wrapper {
+    flex: 1;
     display: flex;
+    flex-direction: column;
+  }
+  .content {
+    border-bottom: 1px solid var(--theme-border);
+    display: flex;
+    flex: 1;
+    position: relative;
   }
 
   .toolstrip {
-    position: absolute;
-    left: 0;
-    height: var(--dim-toolstrip-height);
-    right: 0;
-    bottom: 0;
     display: flex;
+    flex-wrap: wrap;
     background: var(--theme-bg-1);
   }
 </style>

packages/web/src/buttons/ToolStripSplitButton.svelte

@@ -39,6 +39,7 @@
     align-self: stretch;
     display: flex;
     user-select: none;
+    margin: 2px 0px;
   }
   .button.disabled {
     color: var(--theme-font-3);

packages/web/src/tabs/TableDataTab.svelte

@@ -101,6 +101,7 @@
   import { getBoolSettingsValue, getIntSettingsValue } from '../settings/settingsTools';
   import useEditorData from '../query/useEditorData';
   import { markTabSaved, markTabUnsaved } from '../utility/common';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
 
   export let tabid;
   export let conid;
@@ -281,32 +282,28 @@
     <ToolStripCommandButton command="dataGrid.switchToForm" hideDisabled />
     <ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
     <ToolStripExportButton {quickExportHandlerRef} />
+
+    <ToolStripButton
+      icon="icon structure"
+      on:click={() => {
+        openNewTab({
+          title: pureName,
+          icon: 'img table-structure',
+          tabComponent: 'TableStructureTab',
+          props: {
+            schemaName,
+            pureName,
+            conid,
+            database,
+            objectTypeField: 'tables',
+          },
+        });
+      }}>Open structure</ToolStripButton
+    >
+
+    <ToolStripButton
+      icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
+      on:click={() => collapsedLeftColumnStore.update(x => !x)}>View columns</ToolStripButton
+    >
   </svelte:fragment>
 </ToolStripContainer>
-
-<StatusBarTabItem
-  text="Open structure"
-  icon="icon structure"
-  clickable
-  onClick={() => {
-    openNewTab({
-      title: pureName,
-      icon: 'img table-structure',
-      tabComponent: 'TableStructureTab',
-      props: {
-        schemaName,
-        pureName,
-        conid,
-        database,
-        objectTypeField: 'tables',
-      },
-    });
-  }}
-/>
-
-<StatusBarTabItem
-  text="View columns"
-  icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
-  clickable
-  onClick={() => collapsedLeftColumnStore.update(x => !x)}
-/>

packages/web/src/tabs/TableStructureTab.svelte

@@ -60,6 +60,7 @@
   import { apiCall } from '../utility/api';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
 
   export let tabid;
   export let conid;
@@ -190,27 +191,25 @@
     <ToolStripCommandButton command="tableStructure.reset" />
     <ToolStripCommandButton command="tableEditor.addColumn" />
     <ToolStripCommandButton command="tableEditor.addIndex" />
+
+    {#if objectTypeField == 'tables'}
+      <ToolStripButton
+        icon="icon table"
+        on:click={() => {
+          openNewTab({
+            title: pureName,
+            icon: 'img table',
+            tabComponent: 'TableDataTab',
+            props: {
+              schemaName,
+              pureName,
+              conid,
+              database,
+              objectTypeField: 'tables',
+            },
+          });
+        }}>Open data</ToolStripButton
+      >
+    {/if}
   </svelte:fragment>
 </ToolStripContainer>
-
-{#if objectTypeField == 'tables'}
-  <StatusBarTabItem
-    text="Open data"
-    icon="icon table"
-    clickable
-    onClick={() => {
-      openNewTab({
-        title: pureName,
-        icon: 'img table',
-        tabComponent: 'TableDataTab',
-        props: {
-          schemaName,
-          pureName,
-          conid,
-          database,
-          objectTypeField: 'tables',
-        },
-      });
-    }}
-  />
-{/if}