Merge remote-tracking branch 'origin/main' into bl-more-slots

src/components/install/GpuPicker.vue

@@ -112,16 +112,12 @@
     </div>
 
     <div
-      class="transition-opacity flex gap-3 h-0"
+      class="transition-opacity flex gap-3 h-0 items-center"
       :class="{
         'opacity-40': selected && selected !== 'cpu'
       }"
     >
-      <ToggleSwitch
-        v-model="cpuMode"
-        input-id="cpu-mode"
-        class="-translate-y-40"
-      />
+      <ToggleSwitch v-model="cpuMode" input-id="cpu-mode" />
       <label for="cpu-mode" class="select-none">
         {{ $t('install.gpuSelection.enableCpuMode') }}
       </label>

src/components/topbar/WorkflowTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="workflowTabRef"
-    class="flex p-2 gap-2 workflow-tab"
+    class="flex p-2 gap-2 workflow-tab group"
     v-bind="$attrs"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
@@ -11,9 +11,13 @@
       {{ workflowOption.workflow.filename }}
     </span>
     <div class="relative">
-      <span v-if="shouldShowStatusIndicator" class="status-indicator">•</span>
+      <span
+        v-if="shouldShowStatusIndicator"
+        class="group-hover:hidden absolute font-bold text-2xl top-1/2 left-1/2 -translate-1/2 z-10 bg-(--comfy-menu-secondary-bg) w-4"
+        >•</span
+      >
       <Button
-        class="close-button p-0 w-auto"
+        class="close-button p-0 w-auto invisible"
         icon="pi pi-times"
         text
         severity="secondary"
@@ -174,18 +178,6 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.status-indicator {
-  @apply absolute font-bold;
-  font-size: 1.5rem;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>
-
 <style>
 .p-tooltip.workflow-tab-tooltip {
   z-index: 1200 !important;

src/components/topbar/WorkflowTabs.vue

@@ -358,14 +358,6 @@ onUpdated(() => {
   @apply visible;
 }
 
-:deep(.p-togglebutton:hover) .status-indicator {
-  @apply hidden;
-}
-
-:deep(.p-togglebutton) .close-button {
-  @apply invisible;
-}
-
 :deep(.p-scrollpanel-content) {
   @apply h-full;
 }

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue

@@ -6,7 +6,7 @@
     <!-- Display mode: Rendered markdown -->
     <div
       v-if="!isEditing"
-      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
       v-html="renderedHtml"
     />
 
@@ -28,6 +28,7 @@
       @click.stop
       @keydown.stop
     />
+    <LODFallback />
   </div>
 </template>
 
@@ -39,6 +40,8 @@ import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
+import LODFallback from '../../components/LODFallback.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<string>
   modelValue: string