chore: fix container query bug in ai chat widget (#40607)

/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14900550928>
> Commit: a3a3579aaac44d2cfdfa956d46024145c4bfdad9
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14900550928&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Thu, 08 May 2025 07:22:28 UTC
<!-- end of auto-generated comment: Cypress test results  -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Introduced a named container ("flex-container") to relevant CSS
classes for improved container query support.
- Updated container queries to explicitly reference the new container
name, enabling more precise and scoped responsive styling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Pawan Kumar 2025-05-08 13:37:58 +05:30 committed by GitHub
parent 8a67948f1b
commit 0e5252c30c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 3 additions and 1 deletions

View File

@ -97,7 +97,7 @@ export const containerDimensionStyles = <T = FlexCssProps[keyof FlexCssProps]>(
if (current !== "base") {
return (
prev +
`@container (min-width: ${current}) {& {
`@container flex-container (min-width: ${current}) {& {
${cssProp}: ${
//@ts-expect-error: type mismatch
callback ? callback(value[current], extraProps) : value[current]

View File

@ -1,5 +1,6 @@
.flexContainer {
container-type: inline-size;
container-name: flex-container;
display: flex;
justify-content: center;
width: 100%;

View File

@ -1,3 +1,4 @@
.make-container {
container-type: inline-size;
container-name: flex-container;
}