-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: preview mode canvas cutoff #33960
Conversation
/build-deploy-preview skip-tests=true |
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/9365177542. |
e2c3a00
to
5c630f5
Compare
WalkthroughThe changes focus on fixing the issue where the canvas gets cut off in preview mode. This is achieved by introducing a Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant User
participant MainContainerWrapper
participant MainContainerResizer
User->>MainContainerWrapper: Load Canvas
MainContainerWrapper->>MainContainerResizer: Pass navigationHeight
MainContainerResizer->>MainContainerWrapper: Adjust top position and height
User->>MainContainerWrapper: Switch to Preview Mode
MainContainerWrapper->>MainContainerResizer: Adjust styling for Preview Mode
Assessment against linked issues
Poem
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx (2 hunks)
- app/client/src/pages/Editor/WidgetsEditor/components/MainContainerWrapper.tsx (3 hunks)
Additional context used
Biome
app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx
[error] 79-79: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 95-95: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 99-99: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 111-111: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 99-116: This function expression can be turned into an arrow function. (lint/complexity/useArrowFunction)
Function expressions that don't use this can be turned into arrow functions.
Safe fix: Use an arrow function instead.
[error] 118-118: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 118-134: This function expression can be turned into an arrow function. (lint/complexity/useArrowFunction)
Function expressions that don't use this can be turned into arrow functions.
Safe fix: Use an arrow function instead.
[error] 136-136: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 140-140: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 136-143: This function expression can be turned into an arrow function. (lint/complexity/useArrowFunction)
Function expressions that don't use this can be turned into arrow functions.
Safe fix: Use an arrow function instead.
[error] 145-145: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 146-146: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 149-150: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 74-74: This hook does not specify all of its dependencies: dispatch (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
This dependency is not specified in the hook dependency list.
[error] 74-74: This hook specifies more dependencies than necessary: isPreview, currentPageId (lint/correctness/useExhaustiveDependencies)
Outer scope values aren't valid dependencies because mutating them doesn't re-render the component.
Outer scope values aren't valid dependencies because mutating them doesn't re-render the component.
app/client/src/pages/Editor/WidgetsEditor/components/MainContainerWrapper.tsx
[error] 137-137: This hook does not specify all of its dependencies: dispatch (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
Additional comments not posted (3)
app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx (2)
63-69
: The addition ofnavigationHeight
as an optional parameter in the function signature is well-aligned with the PR objectives to handle canvas cutoff issues in preview mode.
173-174
: The inline style adjustments based onisPreview
andnavigationHeight
are appropriate for handling different canvas heights in preview mode. This should effectively resolve the canvas cutoff issue as described.app/client/src/pages/Editor/WidgetsEditor/components/MainContainerWrapper.tsx (1)
207-207
: The adjustment of the main container's height based onisPreviewMode
andnavigationHeight
is correctly implemented to handle different display conditions in preview mode.
Deploy-Preview-URL: https://ce-33960.dp.appsmith.com |
Description
Fix canvas and resizer height with and without navigation.
Fixes #32301
Automation
/ok-to-test tags="@tag.All"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/9381694039
Commit: 5c630f5
Cypress dashboard url: Click here!
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
navigationHeight
for dynamic styling in preview mode.headerHeight
withnavigationHeight
.