add connection style

packages/web/src/buttons/LargeButton.svelte

@@ -4,6 +4,7 @@
 
   export let icon;
   export let disabled = false;
+  export let fillHorizontal = false;
 
   const dispatch = createEventDispatcher();
 
@@ -12,7 +13,7 @@
   }
 </script>
 
-<div class="button" on:click={handleClick} class:disabled>
+<div class="button" on:click={handleClick} class:disabled class:fillHorizontal>
   <div class="icon">
     <FontIcon {icon} />
   </div>
@@ -31,6 +32,11 @@
     background-color: var(--theme-bg-1);
   }
 
+  .button.fillHorizontal {
+    width: auto;
+    margin: 0px 10px;
+  }
+
   .button:not(.disabled):hover {
     background-color: var(--theme-bg-2);
   }

packages/web/src/buttons/ToolStripSplitDropDownButton.svelte

@@ -9,6 +9,7 @@
   export let label;
   export let icon;
   export let component = ToolStripButton;
+  export let disabled = false;
 
   function handleClick(e) {
     const rect = e.detail.target.getBoundingClientRect();
@@ -18,6 +19,6 @@
   }
 </script>
 
-<ToolStripSplitButton {title} {icon} on:splitclick={handleClick} on:click>
+<ToolStripSplitButton {title} {icon} {disabled} on:splitclick={handleClick} on:click>
   <slot />
 </ToolStripSplitButton>