From c3c63da7524c29b7ee50f15184d9b0f7e5f871e3 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 10 Feb 2022 11:26:10 +0100
Subject: [PATCH] scroll tabs on mouse wheel

---
 packages/web/src/Screen.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte
index a05fbbd8c..c088c8758 100644
--- a/packages/web/src/Screen.svelte
+++ b/packages/web/src/Screen.svelte
@@ -24,11 +24,20 @@
   import dragDropFileTarget from './utility/dragDropFileTarget';
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
+
+  let domTabs;
+
+  function handleTabsWheel(e) {
+    if (!e.shiftKey) {
+      e.preventDefault();
+      domTabs.scrollBy({ top: 0, left: e.deltaY < 0 ? -150 : 150, behavior: 'smooth' });
+    }
+  }
 </script>
 
 <svelte:head>
   {#if $currentThemeDefinition?.themeCss}
-  {@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
+    {@html `<style id="themePlugin" ✂prettier:content✂="JHskY3VycmVudFRoZW1lRGVmaW5pdGlvbj8udGhlbWVDc3N9" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂=""></style>`}
   {/if}
 </svelte:head>
 
@@ -48,7 +57,7 @@
       <WidgetContainer />
     </div>
   {/if}
-  <div class="tabs">
+  <div class="tabs" on:wheel={handleTabsWheel} bind:this={domTabs}>
     <TabsPanel />
   </div>
   <div class="content">