fix: Action redesign/remove container query #36014
Conversation
…o action-redesign/remove-container-query
WalkthroughThe recent changes involve updates to the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
Bug
albinAppsmith
changed the title
github-actions
bot
added
Bug
app/client/src/components/formControls/DynamicTextFieldControl.tsx
Outdated
Show resolved
Hide resolved
|
/build-deploy-preview skip-test=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/10631433861. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- app/client/src/components/formControls/DynamicTextFieldControl.tsx (1 hunks)
- app/client/src/components/formControls/FieldArrayControl.tsx (1 hunks)
- app/client/src/pages/Editor/ActionForm/Section/styles.module.css (1 hunks)
- app/client/src/pages/Editor/ActionForm/Zone/styles.module.css (2 hunks)
Files skipped from review due to trivial changes (1)
- app/client/src/pages/Editor/ActionForm/Section/styles.module.css
Additional comments not posted (4)
app/client/src/pages/Editor/ActionForm/Zone/styles.module.css (2)
8-8: Refinement of grid layout for better responsiveness.The change to
grid-template-columnsusingauto-fillandminmaxis a smart move, ensuring that the layout adapts dynamically to the available space. This should significantly improve the responsiveness of the UI.
56-58: Resetting minimum width for advertisement selectors.Unsetting the minimum width for
.ads-v2-select > .rc-select-selectoris a good approach to make the advertisement selectors more adaptable to various screen sizes. This change should help prevent UI layout issues when resizing.app/client/src/components/formControls/DynamicTextFieldControl.tsx (1)
68-68: Enhancement to class naming for dynamic text field control.Adding
dynamic-text-feild-controlto the class name of theWrappercomponent allows for more specific styling and potentially better functionality. This is a straightforward and effective way to enhance the component's adaptability and maintainability by separating concerns through CSS.app/client/src/components/formControls/FieldArrayControl.tsx (1)
103-103: Introduction ofisIconButtonprop to enhance semantic clarity.Adding the
isIconButtonprop to theCenteredIconButtoncomponent is a thoughtful enhancement. It clarifies the component's role and usage within the UI, which can help in future maintenance and potentially optimize rendering by providing more context to the styling logic.
| /* Remove when code editor min width is resolved in DynamicTextFeildControl */ | ||
| & :global(.dynamic-text-feild-control) { | ||
| min-width: 260px; |
There was a problem hiding this comment.
Set minimum width for dynamic text field control.
Setting a minimum width of 260px for the .dynamic-text-feild-control class is a temporary fix to ensure that elements do not become too small on narrower screens. However, it's crucial to address this in the DynamicTextFeildControl component itself to avoid hard-coded values in the CSS, which can lead to maintenance issues.
Consider implementing a more flexible solution within the component logic rather than relying on CSS overrides.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- app/client/src/components/formControls/DynamicTextFieldControl.tsx (1 hunks)
- app/client/src/pages/Editor/ActionForm/Zone/styles.module.css (2 hunks)
Files skipped from review as they are similar to previous changes (2)
- app/client/src/components/formControls/DynamicTextFieldControl.tsx
- app/client/src/pages/Editor/ActionForm/Zone/styles.module.css
|
Deploy-Preview-URL: https://ce-36014.dp.appsmith.com |
## Description PR addresses below issues, 1. Query was not scrollable when code editor field dynamically increase height. This was caused by the container property in Section. Container will ignore absolute positioned elements dynamic heights. 2. Fixed code editor field min-width while resizing 3. Fixed ads select feild min-width while resizing. Fixes appsmithorg#36000 Fixes appsmithorg#35901 ## Automation /ok-to-test tags="@tag.Sanity, @tag.IDE" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10631460963> > Commit: 9d9fe76 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10631460963&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity, @tag.IDE` > Spec: > <hr>Fri, 30 Aug 2024 11:24:13 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced styling for the dynamic text field control, improving visual consistency. - Introduced a flexible grid layout for better responsiveness across different screen sizes. - **Bug Fixes** - Addressed layout issues with minimum width adjustments for dynamic text fields and advertisement selectors. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
PR addresses below issues,
Fixes #36000
Fixes #35901
Automation
/ok-to-test tags="@tag.Sanity, @tag.IDE"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/10631460963
Commit: 9d9fe76
Cypress dashboard.
Tags:
@tag.Sanity, @tag.IDESpec:
Fri, 30 Aug 2024 11:24:13 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Bug Fixes