feat: various improvements to styles and bugs

src/svelte-interface/components/TabbedContainer.svelte

@@ -72,7 +72,7 @@
     >
       <div class="flex">
         {#each tabs as { Content, props }, index}
-          <div class="absolute focus:outline-none w-full h-full transition-opacity duration-300 overflow-y-scroll tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
+          <div class="absolute focus:outline-none w-full h-full transition-opacity duration-300 overflow-y-scroll no-scrollbar tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
             style="left: {index * 100}%;">
              <Content {...props} />
           </div>

src/svelte-interface/components/store/ThemeModal.svelte

@@ -45,12 +45,23 @@
   }
 </script>
 
-<div class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" onclick={() => hideModal()} onkeydown={() => hideModal()} role="button" tabindex="-1" transition:fade>
+<div 
+  class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" 
+  onclick={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  onkeydown={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  role="button" 
+  tabindex="-1" 
+  transition:fade
+>
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div 
     bind:this={modalElement}
-    class="w-full max-w-xl h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll" 
-    onclick={(e) => e.stopPropagation()} 
+    class="w-full max-w-[50%] h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll no-scrollbar cursor-auto" 
+    onclick={(e) => e.stopPropagation()}
     onkeydown={(e) => e.stopPropagation()}
   >
     <div class="relative h-auto">

src/svelte-interface/components/themes/ThemeSelector.svelte

@@ -98,7 +98,7 @@
 </script>
 
 <div
-  class="w-full my-3"
+  class="w-full mt-3 mb-1"
   role="list"
   tabindex="-1"
   ondragover={handleDragOver}

src/svelte-interface/index.css

@@ -41,6 +41,10 @@ input {
   }
 }
 
+.no-scrollbar {
+  scrollbar-width: none !important;
+}
+
 .cm-editor {
   width: 100%;
   min-height: 100px;

src/svelte-interface/pages/settings.svelte

@@ -62,7 +62,7 @@
   });
 </script>
 
-<div class="w-[384px] shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
+<div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
   <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
     <div class="grid border-b border-b-zinc-200/40 place-items-center">
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->

src/svelte-interface/pages/themeCreator.svelte

@@ -230,7 +230,7 @@
   {/if}
 {/snippet}
 
-<div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} '>
+<div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
   <div class='flex flex-col w-full min-h-screen p-2 bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
     <h1 class='text-xl font-semibold'>Theme Creator</h1>
     <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>