Skip to content

fix: float label on Nodes 2.0 textarea widget obscures text #8536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
christian-byrne wants to merge 9 commits into from
Closed

fix: float label on Nodes 2.0 textarea widget obscures text #8536

Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4ddfdb0
Update WidgetTextarea.vue
christian-byrne Feb 2, 2026
c5b0bd5
fix: override PrimeVue FloatLabel styling for textarea widget
christian-byrne Feb 2, 2026
11be802
fix: use primary foreground color for floated label
christian-byrne Feb 2, 2026
df28f65
fix: use unstyled FloatLabel to avoid PrimeVue theme conflicts
christian-byrne Feb 2, 2026
66a58d6
fix: override only background and text color on FloatLabel
christian-byrne Feb 2, 2026
c98a305
[automated] Apply ESLint and Oxfmt fixes
actions-user Feb 2, 2026
f5d23d3
fix: use muted color for FloatLabel to distinguish from input text
christian-byrne Feb 2, 2026
2f2f5a7
[automated] Apply ESLint and Oxfmt fixes
actions-user Feb 2, 2026
ecc6bf7
fix: add background to FloatLabel to create border gap
christian-byrne Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<template>
<FloatLabel
variant="in"
variant="on"
:unstyled="hideLayoutField"
:pt="{ root: { class: '[&_label]:!bg-transparent [&_label]:!text-[color:var(--p-text-color)]' } }"

@coderabbitai coderabbitai Bot Feb 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove Tailwind ! important utilities from the FloatLabel passthrough.

Line 5 uses !-prefixed Tailwind utilities, which are disallowed. Remove the ! and rely on selector specificity/cascade instead.

✅ Proposed fix 
-    :pt="{ root: { class: '[&_label]:!bg-transparent [&_label]:!text-[color:var(--p-text-color)]' } }"
+    :pt="{ root: { class: '[&_label]:bg-transparent [&_label]:text-[color:var(--p-text-color)]' } }"

As per coding guidelines, Never use !important or the ! important prefix for tailwind classes; instead find and correct the interfering !important classes.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
variant="on"
:unstyled="hideLayoutField"
:pt="{ root: { class: '[&_label]:!bg-transparent [&_label]:!text-[color:var(--p-text-color)]' } }"
variant="on"
:unstyled="hideLayoutField"
:pt="{ root: { class: '[&_label]:bg-transparent [&_label]:text-[color:var(--p-text-color)]' } }"
🤖 Prompt for AI Agents 
In `@src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue`
around lines 3 - 5, The FloatLabel passthrough in WidgetTextarea.vue uses
Tailwind's important prefix in the :pt root class string; remove the '!'
prefixes so the class becomes "[&_label]:bg-transparent
[&_label]:text-[color:var(--p-text-color)]" (update the :pt value passed to the
FloatLabel/variant="on" block), and if the styling is overridden elsewhere, fix
specificity via selector ordering or more specific selectors rather than using
'!'. Ensure the change targets the :pt prop in WidgetTextarea.vue where the root
class is defined.

:class="
cn(
'rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
Expand Down
Loading