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:
parent
8a67948f1b
commit
0e5252c30c
|
|
@ -97,7 +97,7 @@ export const containerDimensionStyles = <T = FlexCssProps[keyof FlexCssProps]>(
|
||||||
if (current !== "base") {
|
if (current !== "base") {
|
||||||
return (
|
return (
|
||||||
prev +
|
prev +
|
||||||
`@container (min-width: ${current}) {& {
|
`@container flex-container (min-width: ${current}) {& {
|
||||||
${cssProp}: ${
|
${cssProp}: ${
|
||||||
//@ts-expect-error: type mismatch
|
//@ts-expect-error: type mismatch
|
||||||
callback ? callback(value[current], extraProps) : value[current]
|
callback ? callback(value[current], extraProps) : value[current]
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
.flexContainer {
|
.flexContainer {
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
|
container-name: flex-container;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
.make-container {
|
.make-container {
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
|
container-name: flex-container;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user