Fix node sizing in vue mode (#6289)

Before

![broken-resize](https://github.com/user-attachments/assets/1d3651f7-8589-439c-99d1-fa67c5970945)
After

![vue-resize](https://github.com/user-attachments/assets/ef97ea8f-b601-4a5c-9c6a-34d3f4b776d2)

Also add ~~content~~
[contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
styling for improved render performance.

Future:
- Update size scaling for WidgetLayoutField widgets.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6289-Fix-node-sizing-in-vue-mode-2986d73d365081ac8fa0da35a635b226)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
AustinMroz
2025-10-28 12:18:57 -07:00
committed by GitHub
parent b03cf7e11d
commit 6e4471ad62
17 changed files with 15 additions and 291 deletions

View File

@@ -12,20 +12,20 @@ defineProps<{
<template>
<div
class="flex h-[30px] items-center justify-between gap-2 overscroll-contain"
class="flex h-[30px] min-w-105 items-center justify-between gap-2 overscroll-contain contain-size"
>
<div class="relative flex h-6 items-center">
<div class="relative flex h-6 min-w-28 shrink-1 items-center">
<p
v-if="widget.name"
class="lod-toggle w-28 flex-1 truncate text-sm font-normal text-node-component-slot-text"
class="lod-toggle flex-1 truncate text-sm font-normal text-node-component-slot-text"
>
{{ widget.label || widget.name }}
</p>
<LODFallback />
</div>
<div class="relative">
<div class="relative min-w-75 grow-1">
<div
class="lod-toggle w-75 cursor-default"
class="lod-toggle cursor-default"
@pointerdown.stop="noop"
@pointermove.stop="noop"
@pointerup.stop="noop"