fix(budadmin): resolve pipeline description textarea label overlap

[dittops]

Summary

• Fix floating "Description" label overlapping with textarea text content when entering lengthy multi-line descriptions (fixes Pipelines :: Description :: UI issue #1242)
• Override InfoLabel's h-[3px] constraint using a high-specificity SCSS class to ensure proper label height for text masking
• Add autoSize prop to textarea for dynamic height, use CSS variable for label background, and adjust positioning for MacBook resolution (1440x900)

Changes

• TextArea.tsx: Added autoSize={{ minRows: 3, maxRows: 8 }} and classNames="textarea-info-label" to InfoLabel
• globals.scss: Added background, label positioning (top: -8px), line-height: 1, and .textarea-info-label override class with proper specificity to beat Tailwind's important: true config

Test plan

• Verified label positioning at 1440x900 (MacBook) viewport
• Verified long multi-line text does not overlap the Description label
• Verified empty textarea shows label correctly on border
• Pre-commit hooks pass (lint, typecheck, commitlint)

🤖 Generated with Claude Code

[gemini-code-assist]

Summary of Changes

Hello @dittops, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a user interface defect in the budadmin application where the 'Description' label within a textarea component would visually interfere with the input text, especially for multi-line entries. The changes involve targeted CSS adjustments and the application of a specific class to the InfoLabel component to ensure the label is correctly positioned and masked, enhancing the readability and user experience of the form field.

Highlights

• Resolved Label Overlap: Fixed the issue where the 'Description' label in a textarea would overlap with lengthy multi-line text content, ensuring better readability.
• CSS Specificity Override: Implemented a high-specificity SCSS class (.textarea-info-label) to override the InfoLabel's height constraint, ensuring proper label masking and visibility.
• Styling and Layout Adjustments: Adjusted label positioning, added line-height, and increased padding for the ant-input to improve overall UI presentation, specifically verified for a MacBook resolution.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• services/budadmin/src/components/ui/bud/dataEntry/TextArea.tsx
  • Added classNames="textarea-info-label" to the InfoLabel component to apply specific styling overrides.
• services/budadmin/src/styles/globals.scss
  • Modified the top property of the .label class from -10px to -8px for better vertical alignment.
  • Introduced line-height: 1 to the .label class to control text spacing.
  • Created a new .textarea-info-label rule within .label to set height: auto !important and background: var(--color-background) !important, resolving the label masking issue.
  • Adjusted the padding of the .ant-input class from 0.75rem 1rem to 0.875rem 1rem for improved visual spacing.

Activity

• The pull request was initiated by dittops to fix a UI bug (issue Pipelines :: Description :: UI issue #1242) concerning textarea label overlap.
• The author provided a clear summary of the problem and the proposed changes.
• A comprehensive test plan was included, detailing verification steps for various scenarios and resolutions.
• The PR description notes that it was generated using 'Claude Code'.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request addresses a UI bug where the textarea's floating label overlaps with its content. The changes involve adjusting CSS properties for positioning and size, and introducing a specific class to override styles from a child component. The fix appears correct and well-targeted. I have one suggestion to improve the maintainability of the CSS.

[gemini-code-assist]

For better maintainability, consider using inherit for the background color. This will ensure that the InfoLabel automatically picks up the background color from its parent .label element, even if the parent's background is changed in the future.

      background: inherit !important;