fix(opal): extract interactive container styles to CSS

[raunakab]

Description

Extract inline Tailwind classes from InteractiveContainer into a dedicated CSS class (.interactive-container) and move the border prop to a data-border data attribute, consistent with the existing data-attribute styling pattern used throughout styles.css. Also adds self-stretch to the container.

Screenshots

PATs (in the User Settings)

File Cards (in the main Chat Input Bar)

How Has This Been Tested?

• Verified build passes (bun run types:check)
• Visual inspection of interactive components

Additional Options

• [Required] I have considered whether this PR needs to be cherry-picked to the latest beta branch.
• [Optional] Override Linear Check

---

Summary by cubic

Extracted InteractiveContainer inline Tailwind styles into a reusable CSS class and switched border styling to a data attribute. Also restores self-stretch for more consistent layout.

• Refactors
  • Added .interactive-container class with flex, center alignment, and self-stretch.
  • Moved border prop to data-border="true" to follow the data-attribute styling pattern.

^{Written for commit 3405142. Summary will update on new commits.}

[greptile-apps]

Greptile Overview

Greptile Summary

Extracted inline Tailwind classes (flex items-center justify-center self-stretch) from InteractiveContainer into a dedicated .interactive-container CSS class in styles.css. Migrated the border prop from an inline conditional class to a data-border="true" data attribute with corresponding CSS selector, following the existing data-attribute pattern used throughout the file (like data-disabled, data-static, data-transient, etc.).

• Consolidates styling into CSS for better maintainability and consistency
• Restores self-stretch to the container (previously added in commit 4b0569f)
• Follows the established data-attribute styling convention in the opal interactive system
• No functional changes - purely a refactoring for better code organization

Confidence Score: 5/5

• This PR is safe to merge with no risk
• Clean refactoring that extracts inline styles to CSS and adopts the existing data-attribute pattern. No logic changes, no new dependencies, and follows established conventions in the codebase.
• No files require special attention

Important Files Changed

Filename	Overview
web/lib/opal/src/core/interactive/components.tsx	Refactored inline Tailwind classes to use CSS class .interactive-container and migrated border prop to data-border attribute
web/lib/opal/src/core/interactive/styles.css	Added .interactive-container class with flex layout and self-stretch, plus data-border attribute selector

[cubic-dev-ai]

No issues found across 2 files