[backport core/1.32] fix: remove LOD from vue nodes (#6981)

## Summary
Backport of #6950 onto core/1.32.

- cherry-picked 4b87b1fdc
- resolved conflicts by taking the upstream PNG expectations and
removing LOD bits from WidgetMarkdown while preserving cloud-specific
padding

## Testing
- pnpm typecheck

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6981-backport-core-1-32-fix-remove-LOD-from-vue-nodes-2b86d73d365081ac95fddfb272a0e105)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

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

@@ -5,7 +5,7 @@
   >
     <!-- Display mode: Rendered markdown -->
     <div
-      class="comfy-markdown-content lod-toggle size-full min-h-[60px] overflow-y-auto rounded-lg px-4 py-2 text-sm"
+      class="comfy-markdown-content size-full min-h-[60px] overflow-y-auto rounded-lg px-4 py-2 text-sm"
       :class="isEditing === false ? 'visible' : 'invisible'"
       v-html="renderedHtml"
     />
@@ -27,7 +27,6 @@
       @click.stop
       @keydown.stop
     />
-    <LODFallback />
   </div>
 </template>
 
@@ -38,8 +37,6 @@ import { computed, nextTick, ref } from 'vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
-import LODFallback from '../../components/LODFallback.vue'
-
 const { widget } = defineProps<{
   widget: SimplifiedWidget<string>
 }>()

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

@@ -78,7 +78,6 @@
       @ended="playback.onPlaybackEnded"
       @loadedmetadata="playback.onMetadataLoaded"
     />
-    <LODFallback />
   </div>
 </template>
 
@@ -91,7 +90,6 @@ import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import LODFallback from '@/renderer/extensions/vueNodes/components/LODFallback.vue'
 import { app } from '@/scripts/app'
 import { useAudioService } from '@/services/audioService'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'

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

@@ -3,9 +3,7 @@
     <Textarea
       v-model="modelValue"
       v-bind="filteredProps"
-      :class="
-        cn(WidgetInputBaseClass, 'size-full text-xs lod-toggle resize-none')
-      "
+      :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
       :placeholder="placeholder || widget.name || ''"
       :aria-label="widget.name"
       :readonly="widget.options?.read_only"
@@ -17,7 +15,6 @@
       @pointerup.capture.stop
       @contextmenu.capture.stop
     />
-    <LODFallback />
   </div>
 </template>
 
@@ -32,7 +29,6 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-import LODFallback from '../../components/LODFallback.vue'
 import { WidgetInputBaseClass } from './layout'
 
 const { widget, placeholder = '' } = defineProps<{

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -132,7 +132,6 @@
         </template>
       </TieredMenu>
     </div>
-    <LODFallback />
   </div>
 </template>
 
@@ -143,7 +142,6 @@ import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import LODFallback from '@/renderer/extensions/vueNodes/components/LODFallback.vue'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -3,8 +3,6 @@ import { noop } from 'es-toolkit'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import LODFallback from '../../../components/LODFallback.vue'
-
 defineProps<{
   widget: Pick<SimplifiedWidget<string | number | undefined>, 'name' | 'label'>
 }>()
@@ -15,23 +13,21 @@ defineProps<{
     <div class="relative flex h-full min-w-0 w-20 items-center">
       <p
         v-if="widget.name"
-        class="lod-toggle flex-1 truncate text-xs font-normal text-node-component-slot-text"
+        class="flex-1 truncate text-xs font-normal text-node-component-slot-text"
       >
         {{ widget.label || widget.name }}
       </p>
-      <LODFallback />
     </div>
     <!-- basis-full grow -->
     <div class="relative min-w-0 flex-1">
       <div
-        class="lod-toggle cursor-default min-w-0"
+        class="cursor-default min-w-0"
         @pointerdown.stop="noop"
         @pointermove.stop="noop"
         @pointerup.stop="noop"
       >
         <slot />
       </div>
-      <LODFallback />
     </div>
   </div>
 </template>