fix: float label on Nodes 2.0 textarea widget obscures text#8536
Open
christian-byrne wants to merge 9 commits intomainfrom
Open
fix: float label on Nodes 2.0 textarea widget obscures text#8536christian-byrne wants to merge 9 commits intomainfrom
christian-byrne wants to merge 9 commits intomainfrom
Conversation
dosubot
bot
added
the
size:XS
|
Related Documentation No published documentation to review for changes on this repository. Write your first living document How did I do? Any feedback? |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 02/06/2026, 12:16:46 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests: ❌ FailedResults: 473 passed, 18 failed, 1 flaky, 8 skipped (Total: 500) ❌ Failed Tests📊 Browser Reports
|
Contributor
📝 WalkthroughWalkthroughFloatLabel usage in Changes
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
christian-byrne
added
the
preview-cpu
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.5 kB (baseline 22.5 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 840 kB (baseline 840 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 69 kB (baseline 69 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 410 kB (baseline 410 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 12 added / 12 removed User & Accounts — 16 kB (baseline 16 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 5 added / 5 removed Editors & Dialogs — 3.47 kB (baseline 3.47 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 37.8 kB (baseline 37.8 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 2.1 MB (baseline 2.1 MB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 11 added / 11 removed Utilities & Hooks — 234 kB (baseline 234 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 12 added / 12 removed Vendor & Third-Party — 9.37 MB (baseline 9.37 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.08 MB (baseline 7.08 MB) • 🔴 +127 BBundles that do not match a named category
Status: 50 added / 50 removed |
christian-byrne
changed the title
Override default PrimeVue theme colors (black bg, blue text) on floated label with design system tokens for transparent background and secondary foreground text.
Change from secondary (gray) to primary (white) for better visibility on dark node backgrounds.
Remove custom styling hacks and use unstyled variant to get clean float label behavior without PrimeVue theme colors interfering.
Use PrimeVue passthrough API to override just the problematic theme colors while preserving all the component's positioning and animation behavior.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue`:
- Around line 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.
Comment on lines
3
to
5
| variant="on" | ||
| :unstyled="hideLayoutField" | ||
| :pt="{ root: { class: '[&_label]:!bg-transparent [&_label]:!text-[color:var(--p-text-color)]' } }" |
Contributor
There was a problem hiding this comment.
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.
Contributor
Author
|
SOS: failing to style it properly |
Make label visually distinct from input content by using muted foreground color instead of primary text color.
christian-byrne
added
preview-cpu
Use widget background color on label with horizontal padding to create proper gap in border line, preventing strikethrough appearance.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Solves issue where the float label covers the text when the Nodes 2.0 multiline text widget (textarea) has enough lines of content to fill the visible space. Uses variant defined in https://primevue.org/floatlabel/.
┆Issue is synchronized with this Notion page by Unito