diff --git a/frontend/src/lib/components/Marquee.svelte b/frontend/src/lib/components/Marquee.svelte
new file mode 100644
index 00000000..1316da4c
--- /dev/null
+++ b/frontend/src/lib/components/Marquee.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { cubicInOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
+
+  let running = false;
+
+  export let animationSpeed = 8;
+  let clazz = '';
+  export { clazz as class };
+
+  let element: HTMLElement | null = null;
+  $: totalWidth = element?.scrollWidth ?? 0;
+  $: visibleWidth = element?.clientWidth || totalWidth;
+  $: scrollableWidth = totalWidth - visibleWidth;
+
+  $: animationDuration = scrollableWidth / animationSpeed * 1000;
+
+  $: hoverTranslation = tweened(0, { duration: animationDuration, easing: cubicInOut });
+  let interval: ReturnType<typeof setInterval> | null = null;
+
+  function stop() {
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+    $hoverTranslation = 0;
+  }
+
+  function start() {
+    stop();
+    if (animationDuration > 0) {
+      $hoverTranslation = 1;
+      interval = setInterval(() => {
+        $hoverTranslation = 1 - $hoverTranslation;
+      }, animationDuration);
+    }
+  }
+
+  onDestroy(stop);
+
+  $: {
+    animationDuration;
+    if (running) {
+      start();
+    } else {
+      stop();
+    }
+  }
+</script>
+
+<span
+  bind:this={element}
+  class="max-w-full overflow-hidden {clazz}"
+  role="marquee"
+  on:mouseover={() => running = true}
+  on:mouseout={() => running = false}
+  on:focus={() => running = true}
+  on:blur={() => running = false}
+>
+  <span style="transform: translateX(-{$hoverTranslation * scrollableWidth}px);" class="relative inline-block">
+    <slot />
+  </span>
+</span>
\ No newline at end of file
diff --git a/frontend/src/lib/components/SVGIcon.svelte b/frontend/src/lib/components/SVGIcon.svelte
index bab0005c..3f496562 100644
--- a/frontend/src/lib/components/SVGIcon.svelte
+++ b/frontend/src/lib/components/SVGIcon.svelte
@@ -5,6 +5,6 @@
   export { clazz as class };
 </script>
 
-<svg class="{clazz}" viewBox="0 0 24 24">
+<svg class="shrink-0 {clazz}" viewBox="0 0 24 24">
   <path d={icon} fill="currentColor" />
 </svg>
diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
index 9ba305d4..8e17208a 100644
--- a/frontend/src/lib/components/Select.svelte
+++ b/frontend/src/lib/components/Select.svelte
@@ -80,7 +80,7 @@
     Wrap button in a div so that the trigger node location does not change.    
     -->
     <button class="btn w-full h-full {buttonClass}" {disabled}>
-      <div class="grow flex justify-start min-w-0">
+      <div class="flex-auto text-start justify-start flex min-w-0 space-x-1 overflow-hidden">
         {#if $$slots.selected}
           <slot name="selected" item={value} />
         {:else}
diff --git a/frontend/src/lib/components/T.svelte b/frontend/src/lib/components/T.svelte
index 56d0964a..45e3a857 100644
--- a/frontend/src/lib/components/T.svelte
+++ b/frontend/src/lib/components/T.svelte
@@ -32,7 +32,7 @@
   export let language: string | undefined = undefined;
 
   export let parts: (TranslationComponentPart<SvelteComponent> | TranslationElementPart<keyof SvelteHTMLElements>)[] = [];
-  
+
   const { t } = getTranslate();
   
   function split(content: string) {
@@ -85,10 +85,10 @@
 
 {#each contentParts as part}
   {#if typeof part === 'string'}
-    {part}
+    <span>{part}</span>
   {:else if 'element' in part.component}
     <svelte:element this={part.component.element} {...part.component.props}>{part.content}</svelte:element>
   {:else}
     <svelte:component this={part.component.component} {...part.component.props}>{part.content}</svelte:component>
   {/if}
-{/each}
+{/each}
\ No newline at end of file
diff --git a/frontend/src/lib/components/left-bar/LaunchButton.svelte b/frontend/src/lib/components/left-bar/LaunchButton.svelte
index b22c9134..eb1eca08 100644
--- a/frontend/src/lib/components/left-bar/LaunchButton.svelte
+++ b/frontend/src/lib/components/left-bar/LaunchButton.svelte
@@ -2,6 +2,7 @@
   import { mdiOpenInNew, mdiTrayFull } from '@mdi/js';
   import { getContextClient } from '@urql/svelte';
 
+  import Marquee from '$lib/components/Marquee.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import T from '$lib/components/T.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
@@ -135,10 +136,9 @@
       disabled={!$canInstallMods || !!$progress}
       on:click={() => startQueue()}
     >
-      <span>
+      <Marquee class="flex-auto text-start">
         <T defaultValue={'Apply {queued, plural, one {one change} other {# changes}}'} keyName="launch-button.apply-queued" params={{ queued: $queuedMods.length }}/>
-      </span>
-      <div class="grow" />
+      </Marquee>
       <SvgIcon
         class="h-5 w-5"
         icon={mdiTrayFull}/>
@@ -162,10 +162,9 @@
       class="btn h-8 w-full text-sm bg-surface-200-700-token"
       disabled
     >
-      <span>
+      <Marquee class="flex-auto text-start">
         <T defaultValue="SMM can't launch this install" keyName="launch-button.cant-launch"/>
-      </span>
-      <div class="grow" />
+      </Marquee>
     </button>
   {:else if $launchButton === 'normal' || $isGameRunning || $isLaunchingGame}
     <button
@@ -176,10 +175,9 @@
       disabled={!!$progress || $isGameRunning || $isLaunchingGame}
       on:click={() => launchGame()}
     >
-      <span>
+      <Marquee class="flex-auto text-start">
         <T defaultValue="Play Satisfactory" keyName="launch-button.play"/>
-      </span>
-      <div class="grow" />
+      </Marquee>
       <SvgIcon
         class="h-5 w-5"
         icon={mdiOpenInNew}/>
diff --git a/frontend/src/lib/components/left-bar/LeftBar.svelte b/frontend/src/lib/components/left-bar/LeftBar.svelte
index 8a58b838..5d67044c 100644
--- a/frontend/src/lib/components/left-bar/LeftBar.svelte
+++ b/frontend/src/lib/components/left-bar/LeftBar.svelte
@@ -7,6 +7,7 @@
   import Settings from './Settings.svelte';
   import Updates from './Updates.svelte';
 
+  import Marquee from '$lib/components/Marquee.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import Select from '$lib/components/Select.svelte';
   import T from '$lib/components/T.svelte';
@@ -240,10 +241,9 @@
               disabled={!$canModify}
               on:click={() => setModsEnabled(false)}
             >
-              <span>
+              <Marquee class="flex-auto text-start">
                 <T defaultValue="Mods off" keyName="left-bar.mods-off"/>
-              </span>
-              <div class="grow"/>
+              </Marquee>
               <SvgIcon
                 class="h-5 w-5"
                 icon={mdiCloseCircle} />
@@ -253,10 +253,9 @@
               class:!bg-primary-900={$modsEnabled}
               disabled={!$canModify}
               on:click={() => setModsEnabled(true)}>
-              <span>
+              <Marquee class="flex-auto text-start">
                 <T defaultValue="Mods on" keyName="left-bar.mods-on"/>
-              </span>
-              <div class="grow"/>
+              </Marquee>
               <SvgIcon
                 class="h-5 w-5"
                 icon={mdiCheckCircle} />
@@ -301,10 +300,9 @@
             class="btn w-1/3 bg-surface-200-700-token px-4 h-8 text-sm"
             disabled={!$canModify}
             on:click={() => modalStore.trigger({ type:'component', component: 'addProfile' })}>
-            <span>
+            <Marquee class="flex-auto text-start">
               <T defaultValue="Add" keyName="common.add"/>
-            </span>
-            <div class="grow"/>
+            </Marquee>
             <SvgIcon
               class="h-5 w-5 text-primary-600"
               icon={mdiPlusCircle} />
@@ -313,10 +311,9 @@
             class="btn w-1/3 bg-surface-200-700-token px-2 h-8 text-sm"
             disabled={!$canModify}
             on:click={() => modalStore.trigger({ type:'component', component: { ref: RenameProfile, props: { profile: $selectedProfile } } })}>
-            <span>
+            <Marquee class="flex-auto text-start">
               <T defaultValue="Rename" keyName="common.rename"/>
-            </span>
-            <div class="grow"/>
+            </Marquee>
             <SvgIcon
               class="h-5 w-5 text-warning-500"
               icon={mdiPencil} />
@@ -325,10 +322,9 @@
             class="btn w-1/3 bg-surface-200-700-token px-3 h-8 text-sm"
             disabled={!$canModify || $profiles.length === 1}
             on:click={() => modalStore.trigger({ type:'component', component: { ref: DeleteProfile, props: { profile: $selectedProfile } } })}>
-            <span>
+            <Marquee class="flex-auto text-start">
               <T defaultValue="Delete" keyName="common.delete"/>
-            </span>
-            <div class="grow"/>
+            </Marquee>
             <SvgIcon
               class="h-5 w-5 text-error-700"
               icon={mdiTrashCan} />
@@ -340,10 +336,9 @@
             disabled={!$canModify}
             on:click={() => modalStore.trigger({ type: 'component', component: 'importProfile' })}
           >
-            <span>
+            <Marquee class="flex-auto text-start">
               <T defaultValue="Import" keyName="common.import"/>
-            </span>
-            <div class="grow"/>
+            </Marquee>
             <SvgIcon
               class="h-5 w-5"
               icon={mdiDownload} />
@@ -353,10 +348,9 @@
             disabled={!$canModify}
             on:click={() => exportCurrentProfile()}
           >
-            <span>
+            <Marquee class="flex-auto text-start">
               <T defaultValue="Export" keyName="left-bar.export"/>
-            </span>
-            <div class="grow"/>
+            </Marquee>
             <SvgIcon
               class="h-5 w-5"
               icon={mdiUpload} />
@@ -384,10 +378,9 @@
       <button
         class="btn px-4 h-8 w-full text-sm bg-surface-200-700-token"
         on:click={() => modalStore.trigger({ type: 'component', component: 'serverManager' })}>
-        <span>
+        <Marquee class="flex-auto text-start">
           <T defaultValue="Manage Servers" keyName="left-bar.manage-servers"/>
-        </span>
-        <div class="grow" />
+        </Marquee>
         <SvgIcon
           class="h-5 w-5"
           icon={mdiServerNetwork} />
@@ -397,10 +390,9 @@
         class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
         on:click={() => BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/ForUsers/SatisfactoryModManager.html')}
       >
-        <span>
+        <Marquee class="flex-auto text-start">
           <T defaultValue="Help" keyName="left-bar.help"/>
-        </span>
-        <div class="grow"/>
+        </Marquee>
         <SvgIcon
           class="h-5 w-5"
           icon={mdiHelpCircle} />
@@ -413,10 +405,9 @@
       <button
         class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
         on:click={() => BrowserOpenURL($siteURL)}>
-        <span>
+        <Marquee class="flex-auto text-start">
           <T defaultValue="ficsit.app (Mod Repository)" keyName="left-bar.ficsit-app"/>
-        </span>
-        <div class="grow" />
+        </Marquee>
         <SvgIcon
           class="h-5 w-5"
           icon={mdiWeb} />
@@ -424,10 +415,9 @@
       <button
         class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
         on:click={() => BrowserOpenURL('https://discord.ficsit.app/')}>
-        <span>
+        <Marquee class="flex-auto text-start">
           <T defaultValue="Satisfactory Modding Discord" keyName="left-bar.satisfactory-modding-discord"/>
-        </span>
-        <div class="grow" />
+        </Marquee>
         <SvgIcon
           class="h-5 w-5"
           icon={siDiscord.path} />
@@ -435,10 +425,9 @@
       <button
         class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
         on:click={() => BrowserOpenURL('https://github.com/satisfactorymodding/SatisfactoryModManager')} >
-        <span>
+        <Marquee class="flex-auto text-start">
           <T defaultValue="SMM GitHub" keyName="left-bar.smm-github"/>
-        </span>
-        <div class="grow" />
+        </Marquee>
         <SvgIcon
           class="h-5 w-5"
           icon={siGithub.path} />
diff --git a/frontend/src/lib/components/left-bar/Settings.svelte b/frontend/src/lib/components/left-bar/Settings.svelte
index 2e419168..cf77aadf 100644
--- a/frontend/src/lib/components/left-bar/Settings.svelte
+++ b/frontend/src/lib/components/left-bar/Settings.svelte
@@ -4,6 +4,7 @@
   import { getTranslate } from '@tolgee/svelte';
   import { getContextClient } from '@urql/svelte';
 
+  import Marquee from '$lib/components/Marquee.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import T from '$lib/components/T.svelte';
   import { GetModNameDocument } from '$lib/generated';
@@ -190,10 +191,9 @@
   <div class="w-full h-8" use:popup={settingsMenu}>
     <button class="btn px-4 h-full w-full text-sm bg-surface-200-700-token"
     >
-      <span>
+      <Marquee class="flex-auto text-start">
         <T defaultValue="Mod Manager Settings" keyName="settings.title"/>
-      </span>
-      <div class="grow" />
+      </Marquee>
       <SvgIcon
         class="h-5 w-5"
         icon={mdiTune} />
diff --git a/frontend/src/lib/components/left-bar/Updates.svelte b/frontend/src/lib/components/left-bar/Updates.svelte
index bf6ba201..a8f295f2 100644
--- a/frontend/src/lib/components/left-bar/Updates.svelte
+++ b/frontend/src/lib/components/left-bar/Updates.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { mdiCheckCircle, mdiSync } from '@mdi/js';
 
+  import Marquee from '$lib/components/Marquee.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import T from '$lib/components/T.svelte';
   import { getModalStore } from '$lib/skeletonExtensions';
@@ -43,7 +44,7 @@
   class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
   class:!bg-primary-600={$smmUpdate || $unignoredUpdates.length > 0}
   on:click={() => showUpdateDialog()}>
-  <span>
+  <Marquee class="flex-auto text-start">
     {#if $smmUpdate}
       <T defaultValue="SMM update available" keyName="updates.smm-update-available"/>
     {:else if $unignoredUpdates.length > 0}
@@ -51,8 +52,7 @@
     {:else}
       <T defaultValue="No mod/SMM updates right now" keyName="updates.no-updates"/>
     {/if}
-  </span>
-  <div class="grow" />
+  </Marquee>
   <SvgIcon
     class="h-5 w-5"
     icon={mdiCheckCircle} />
@@ -62,14 +62,13 @@
   class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
   disabled={!!$progress || $updateCheckInProgress}
   on:click={checkForAllUpdates}>
-  <span>
+  <Marquee class="flex-auto text-start">
     {#if $updateCheckInProgress}
       <T defaultValue="Checking for updates..." keyName="updates.checking-for-updates"/>
     {:else}
       <T defaultValue="Check for updates" keyName="updates.check-for-updates"/>
     {/if}
-  </span>
-  <div class="grow" />
+  </Marquee>
   <SvgIcon
     class="h-5 w-5 {$updateCheckInProgress ? 'update-check' : ''}"
     icon={mdiSync} />
diff --git a/frontend/src/lib/components/mod-details/ModDetails.svelte b/frontend/src/lib/components/mod-details/ModDetails.svelte
index 758e1631..a9433609 100644
--- a/frontend/src/lib/components/mod-details/ModDetails.svelte
+++ b/frontend/src/lib/components/mod-details/ModDetails.svelte
@@ -8,6 +8,7 @@
   import ModDetailsEntry from './ModDetailsEntry.svelte';
 
   import Markdown from '$lib/components/Markdown.svelte';
+  import Marquee from '$lib/components/Marquee.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import T, { translationElementPart } from '$lib/components/T.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
@@ -353,9 +354,9 @@
             class="btn px-4 h-10 text-sm w-full bg-secondary-600"
             disabled={!$canInstallMods}
           >
-            <span>
+            <Marquee>
               <T defaultValue="Change version" keyName="mod-details.change-version" />
-            </span>
+            </Marquee>
             <SvgIcon
               class="h-5 w-5"
               icon={mdiChevronDown}/>
@@ -408,9 +409,9 @@
         {#if (!mod || !('offline' in mod)) && !$offline}
           <div class="pt-2" use:popup={changelogMenu}>
             <button class="btn px-4 h-10 text-sm w-full bg-secondary-600">
-              <span>
+              <Marquee>
                 <T defaultValue="Changelogs" keyName="mod-details.changelogs" />
-              </span>
+              </Marquee>
               <SvgIcon
                 class="h-5 w-5"
                 icon={mdiChevronDown}/>
@@ -455,9 +456,9 @@
       <SvgIcon
         class="h-5 w-5 -scale-x-100"
         icon={mdiImport}/>
-      <span>
+      <Marquee>
         <T defaultValue="Close" keyName="common.close" />
-      </span>
+      </Marquee>
     </button>
   </div>
   <div class="break-words overflow-wrap-anywhere flex-1 px-3 mr-3 my-4 overflow-y-scroll overflow-x-hidden w-0">
diff --git a/frontend/src/lib/components/modals/first-time-setup/FirstTimeSetupModal.svelte b/frontend/src/lib/components/modals/first-time-setup/FirstTimeSetupModal.svelte
index c3d5b492..f6c7a8ef 100644
--- a/frontend/src/lib/components/modals/first-time-setup/FirstTimeSetupModal.svelte
+++ b/frontend/src/lib/components/modals/first-time-setup/FirstTimeSetupModal.svelte
@@ -4,6 +4,7 @@
 
   import LanguageSelector from './LanguageSelector.svelte';
 
+  import Marquee from '$lib/components/Marquee.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import { queueAutoStart } from '$lib/store/settingsStore';
   import { SetNewUserSetupComplete } from '$wailsjs/go/settings/settings';
@@ -54,7 +55,9 @@
               class:!bg-primary-900={$queueAutoStart}
               on:click={() => { $queueAutoStart = true; }}
             >
-              <span><T defaultValue="Apply changes immediately" keyName="first_time_setup.option.queue-auto-start.enabled"/></span>
+              <Marquee>
+                <T defaultValue="Apply changes immediately" keyName="first_time_setup.option.queue-auto-start.enabled"/>
+              </Marquee>
               <SvgIcon
                 class="h-5 w-5"
                 icon={mdiPlay} />
@@ -64,7 +67,9 @@
               class:!bg-primary-900={!$queueAutoStart}
               on:click={() => { $queueAutoStart = false; }}
             >
-              <span><T defaultValue='Wait for me to press "Apply"' keyName="first_time_setup.option.queue-auto-start.disabled"/></span>
+              <Marquee>
+                <T defaultValue='Wait for me to press "Apply"' keyName="first_time_setup.option.queue-auto-start.disabled"/>
+              </Marquee>
               <SvgIcon
                 class="h-5 w-5"
                 icon={mdiClock} />
diff --git a/frontend/src/lib/components/modals/settings/CacheLocationPicker.svelte b/frontend/src/lib/components/modals/settings/CacheLocationPicker.svelte
index 1a1086d1..d739635a 100644
--- a/frontend/src/lib/components/modals/settings/CacheLocationPicker.svelte
+++ b/frontend/src/lib/components/modals/settings/CacheLocationPicker.svelte
@@ -101,15 +101,17 @@
           class="btn mr-4 shrink-0 text-primary-600"
           disabled={cacheMoveInProgress}
           on:click={() => resetCacheLocation()}>
-          <span><T defaultValue="Reset to default" keyName="settings.cache.reset" /></span>
-          <div class="grow" />
+          <span class="flex-auto text-start">
+            <T defaultValue="Reset to default" keyName="settings.cache.reset" />
+          </span>
         </button>
         <button
           class="btn shrink-0 text-primary-600"
           disabled={cacheMoveInProgress}
           on:click={() => setCacheLocation()}>
-          <span><T defaultValue="Save and move" keyName="settings.cache.save" /></span>
-          <div class="grow" />
+          <span class="flex-auto text-start">
+            <T defaultValue="Save and move" keyName="settings.cache.save" />
+          </span>
         </button>
       </div>
     </label>
@@ -119,7 +121,9 @@
       class="btn text-primary-600 variant-ringed"
       disabled={cacheMoveInProgress}
       on:click={parent.onClose}>
-      <span><T defaultValue="Close" keyName="common.close" /></span>
+      <span>
+        <T defaultValue="Close" keyName="common.close" />
+      </span>
     </button>
   </footer>
 </div>
diff --git a/frontend/src/lib/components/modals/settings/Proxy.svelte b/frontend/src/lib/components/modals/settings/Proxy.svelte
index 7ea15011..d54b4a91 100644
--- a/frontend/src/lib/components/modals/settings/Proxy.svelte
+++ b/frontend/src/lib/components/modals/settings/Proxy.svelte
@@ -38,8 +38,9 @@
           class="btn shrink-0 text-primary-600"
           disabled={!canChange}
           on:click={() => { proxyURL = ''; setProxy(); }}>
-          <span><T defaultValue="Remove proxy" keyName="settings.proxy.remove" /></span>
-          <div class="grow" />
+          <span class="flex-auto text-start">
+            <T defaultValue="Remove proxy" keyName="settings.proxy.remove" />
+          </span>
         </button>
       </div>
     </label>
@@ -48,7 +49,9 @@
     <button
       class="btn text-primary-600 variant-ringed"
       on:click={parent.onClose}>
-      <span><T defaultValue="Close" keyName="common.close" /></span>
+      <span>
+        <T defaultValue="Close" keyName="common.close" />
+      </span>
     </button>
     <button
       class="btn shrink-0 text-primary-600"
diff --git a/frontend/src/lib/components/mods-list/ModsListFilters.svelte b/frontend/src/lib/components/mods-list/ModsListFilters.svelte
index 10e2d695..60617f58 100644
--- a/frontend/src/lib/components/mods-list/ModsListFilters.svelte
+++ b/frontend/src/lib/components/mods-list/ModsListFilters.svelte
@@ -2,6 +2,7 @@
   import { mdiClose, mdiFilter, mdiSort } from '@mdi/js';
   import { getTranslate } from '@tolgee/svelte';
 
+  import Marquee from '$lib/components/Marquee.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import Select from '$lib/components/Select.svelte';
   import { type FilterField, type OrderByField, filter, filterOptions, order, orderByOptions, search } from '$lib/store/modFiltersStore';
@@ -59,7 +60,7 @@
       <div class="h-5 w-5">
         <SvgIcon icon={mdiFilter} />
       </div>
-      <span class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{filterNames[item.id]}</span>
+      <Marquee class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{filterNames[item.id]}</Marquee>
     </svelte:fragment>
     <svelte:fragment slot="item" let:item>
       <span>{filterNames[item.id]}</span>
@@ -80,7 +81,7 @@
       <div class="h-5 w-5">
         <SvgIcon icon={mdiSort} />
       </div>
-      <span class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{orderByNames[item.id]}</span>
+      <Marquee class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{orderByNames[item.id]}</Marquee>
     </svelte:fragment>
     <svelte:fragment slot="item" let:item>
       <span>{orderByNames[item.id]}</span>