Progressbar on mobile improvement

src/lib/widgets/ComboWidget.svelte

@@ -8,7 +8,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutStates";
  import { get, writable, type Writable } from "svelte/store";
  import { isDisabled } from "./utils"
-	import { getSafetensorsMetadata } from '$lib/utils';
+ import { getSafetensorsMetadata } from '$lib/utils';
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
@@ -74,26 +74,10 @@
      }
  }
 
- function onSelect(e: CustomEvent<any>) {
-     if (input)
-         input.blur();
-     navigator.vibrate(20)
-
-     const item = e.detail
-
-     console.debug("[ComboWidget] SELECT", item, item.index)
-     $nodeValue = item.value;
-     activeIndex = item.index;
-     listOpen = false;
- }
-
  let activeIndex = null;
  let hoverItemIndex = null;
  let filterText = "";
  let listOpen = null;
- let scrollToIndex = null;
- let start = 0;
- let end = 0;
 
  function handleHover(index: number) {
      // console.warn("HOV", index)
@@ -108,7 +92,9 @@
      $nodeValue = item.value
      listOpen = false;
      filterText = ""
-     input?.blur()
+     setTimeout(() => {
+         input?.blur();
+     }, 100)
  }
 
  function onFilter() {
@@ -174,7 +160,10 @@
             on:select={(e) => handleSelect(e.detail.index)}
             on:blur
             on:filter={onFilter}>
-            <div class="comfy-select-list" slot="list" let:filteredItems style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
+            <div class="comfy-select-list" slot="list"
+                 class:mobile={isMobile}
+                 let:filteredItems
+                 style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
                 {#if filteredItems.length > 0}
                     {@const itemSize = isMobile ? 50 : 25}
                     {@const itemsToShow = isMobile ? 10 : 30}
@@ -292,9 +281,14 @@
 
  .comfy-select-list {
      --maxLabelWidth: 100;
+     --maxListWidth: 50vw;
+     &.mobile {
+         --maxListWidth: 80vw;
+     }
+
      font-size: 14px;
-     width: min(calc((var(--maxLabelWidth) + 10) * 1ch), 50vw);
      color: var(--item-color);
+     width: min(calc((var(--maxLabelWidth) + 10) * 1ch), var(--maxListWidth));
 
      > :global(.virtual-list-wrapper) {
          box-shadow: var(--block-shadow);

src/lib/widgets/MarkdownWidget.svelte

@@ -5,7 +5,7 @@
  import type { ComfyMarkdownNode } from "$lib/nodes/widgets";
  import SvelteMarkdown from "@dogagenc/svelte-markdown"
  import NullMarkdownRenderer from "./markdown/NullMarkdownRenderer.svelte"
-	import { SvelteComponentDev } from "svelte/internal";
+ import { SvelteComponentDev } from "svelte/internal";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
@@ -69,7 +69,7 @@
  }
 
  /* headings
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
  .prose h1,
  .prose h2,
@@ -107,7 +107,7 @@
  }
 
  /* lists
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .prose ul {
      list-style: circle inside;
  }
@@ -136,7 +136,7 @@
  }
 
  /* code
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .prose code {
      border: 1px solid var(--border-color-primary);
      border-radius: var(--radius-sm);
@@ -153,7 +153,7 @@
  }
 
  /* tables
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .prose th,
  .prose td {
      border-bottom: 1px solid #e1e1e1;
@@ -170,7 +170,7 @@
  }
 
  /* spacing
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .prose button,
  .prose .button {
      margin-bottom: var(--spacing-sm);
@@ -194,7 +194,7 @@
  }
 
  /* links
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .prose a {
      color: var(--link-text-color);
      text-decoration: underline;
@@ -212,7 +212,7 @@
  }
 
  /* misc
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
  .prose hr {
      margin-top: 3em;