Progressbar on mobile improvement

src/lib/components/f7/progressbar.svelte

@@ -0,0 +1,58 @@
+<!--
+Fix a framework7 issue
+https://github.com/framework7io/framework7/issues/4183
+-->
+<script>
+ let className = undefined;
+ export { className as class };
+
+ export let progress = 0;
+ export let infinite = false;
+
+ function colorClasses(props) {
+     const { color, textColor, bgColor, borderColor, rippleColor, dark } = props;
+
+     return {
+         dark,
+         [`color-${color}`]: color,
+         [`text-color-${textColor}`]: textColor,
+         [`bg-color-${bgColor}`]: bgColor,
+         [`border-color-${borderColor}`]: borderColor,
+         [`ripple-color-${rippleColor}`]: rippleColor,
+     };
+ }
+
+ function classNames(...args) {
+     const classes = [];
+     args.forEach((arg) => {
+         if (typeof arg === 'object' && arg.constructor === Object) {
+             Object.keys(arg).forEach((key) => {
+                 if (arg[key]) classes.push(key);
+             });
+         } else if (arg) classes.push(arg);
+     });
+     const uniqueClasses = [];
+     classes.forEach((c) => {
+         if (uniqueClasses.indexOf(c) < 0) uniqueClasses.push(c);
+     });
+     return uniqueClasses.join(' ');
+ }
+
+ let classes
+ $: classes = classNames(
+     className,
+     'progressbar',
+     {
+         'progressbar-infinite': infinite,
+     },
+     colorClasses($$props),
+ );
+
+ let transformStyle = ""
+ $: transformStyle = progress ? `translate3d(${-100 + progress}%, 0, 0)` : '';
+</script>
+
+<span class={classes}
+      data-progress={progress} >
+    <span style:transform={transformStyle} />
+</span>

src/lib/nodes/widgets/ComfyMarkdownNode.ts

@@ -42,6 +42,7 @@ export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
             },
             {
                 multiline: true,
+
                 inputStyle: { fontFamily: "monospace" }
             }
         )

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;