fix: expand TextInputWithCopyButton input to container width

[jfox-box]

User reported an issue with resizing TextInputCopyButton -- the input would not expand to match the copy button if they set the width of the container to 100%.

https://box.slack.com/archives/C09J7RM2UFR/p1768386832459429

Fixes it by adding width: 100% to the Tooltip wrapper.

Summary by CodeRabbit

• New Features

  • Tooltip wrapper for text inputs is now customizable, enabling targeted styling of tooltip containers.

• Style

  • Tooltip wrapper spans full width.
  • Button transition timing refined for smoother visuals.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds a new tooltipWrapperClassName prop to TextInput and passes a specific wrapper class from TextInputWithCopyButton; updates SCSS to add the corresponding tooltip wrapper selector and reformats a transition declaration.

Changes

Cohort / File(s)	Summary
TextInput component src/components/text-input/TextInput.js	Exports new prop tooltipWrapperClassName?: string; maps existing tooltipTetherClassName to tetherElementClassName and passes targetWrapperClassName={tooltipWrapperClassName} into Tooltip.
TextInputWithCopyButton usage src/components/text-input-with-copy-button/TextInputWithCopyButton.js	Supplies tooltipWrapperClassName="bdl-TextInputWithCopyButton-tooltipWrapper" to TextInput invocation.
Styling src/components/text-input-with-copy-button/TextInputWithCopyButton.scss	Adds .bdl-TextInputWithCopyButton-tooltipWrapper { width: 100%; } selector and reformats the right-button-group transition declaration to multi-line entries; renamed selector capitalization.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

ready-to-merge

Suggested reviewers

• JChan106
• jpan-box

Poem

🐰 I hopped a class onto the wrapper bright,
A stretch of width to set things right,
Transitions sing in tidy lines,
A tiny change, a flurry of signs —
🥕 hop-hop, the tooltip feels just right.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The pull request description provides context via a Slack link and before/after screenshots, but lacks formal structure matching the template's required sections and formatting guidelines.	Add explicit sections for Problem Statement, Solution, and Testing/Impact to align with repository standards and improve clarity for reviewers.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding proper width expansion behavior to TextInputWithCopyButton input.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/text-input-with-copy-button/TextInputWithCopyButton.scss`:
- Around line 12-14: The .text-input-tooltip-wrapper rule uses width: stretch
which is experimental; update the stylesheet to provide a compatible fallback by
adding width: 100% before width: stretch and, if desired, include
vendor-prefixed variants (e.g., -webkit-stretch and -moz-stretch) after the
fallback to preserve experimental behavior in supporting browsers; ensure the
width: 100% line appears before the stretch declarations so non-supporting
browsers use the reliable fallback.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fcaf6f2 and dc49df2.

📒 Files selected for processing (1)

• src/components/text-input-with-copy-button/TextInputWithCopyButton.scss

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: semgrep-cloud-platform/scan
• GitHub Check: lint_test_build
• GitHub Check: Summary

🔇 Additional comments (1)

src/components/text-input-with-copy-button/TextInputWithCopyButton.scss (1)

36-38: LGTM!

Formatting change for linting compliance. No functional impact.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

[mergify]

Merge Queue Status

✅ The pull request has been merged at 99acdef

This pull request spent 9 minutes 41 seconds in the queue, including 9 minutes 32 seconds running CI.
The checks were run in-place.

Required conditions to merge

• #approved-reviews-by >= 1 [🛡 GitHub branch protection]
  • fix: expand TextInputWithCopyButton input to container width #4418
• #changes-requested-reviews-by = 0 [🛡 GitHub branch protection]
  • fix: expand TextInputWithCopyButton input to container width #4418
• #review-threads-unresolved = 0 [🛡 GitHub branch protection]
  • fix: expand TextInputWithCopyButton input to container width #4418
• branch-protection-review-decision = APPROVED [🛡 GitHub branch protection]
  • fix: expand TextInputWithCopyButton input to container width #4418
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request