fix(chakra-ui): resolve sider issue #5475

[ShivamDureja]

Issue Fixed: [Chakra UI Sider overflows when collapsed #5475]

Description:

• Resolved the issue where the Chakra UI Sider was overflowing when collapsed.
• Adjusted the styles to prevent horizontal overflow when the Sider is in a collapsed state.

Changes Made:

• Modified the styles for the Sider component to address the overflow issue
• Assigned value of overflowX to hidden in refine/packages/chakra-ui/src/components/themedLayoutV2/sider

Self Check before Merge

Please check all items below before review.

• [x] Corresponding issues are created/updated or not needed
• [x] Docs are updated/provided or not needed
• [x] Examples are updated/provided or not needed
• [x] TypeScript definitions are updated/provided or not needed
• [x] Tests are updated/provided or not needed
• [x] Changesets are provided or not needed

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: fe516c2439c2303916fc0aa4a3ccd2472e445188

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[alicanerdurmaz]

@ShivamDureja Thanks for the PR 🚀

Can you write a changeset please?

[ShivamDureja]

---

"@refinedev/refine/packages/chakra-ui": patch

fix: issue with Chakra-UI sider that overflows when collapsed

When we try to collapse the sider it overflows so changed overflow-x property to hidden whereas overflow-y remains auto.

It is expected to improve the user interface and resolve the mentioned bug.

Issue : [https://github.com/refinedev/refine/issues/5475]
PR raised : [https://github.com/refinedev/refine/pull/5480]

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ff80f562db8dfdc62645f86f69492c9b250f9335. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 83 targets

• lerna run cypress:run --scope with-remix-material-ui -- --record --key --group with-remix-material-ui
• lerna run cypress:run --scope with-remix-headless -- --record --key --group with-remix-headless
• lerna run cypress:run --scope with-remix-antd -- --record --key --group with-remix-antd
• lerna run cypress:run --scope with-nextjs-next-auth -- --record --key --group with-nextjs-next-auth
• lerna run cypress:run --scope with-nextjs-auth -- --record --key --group with-nextjs-auth
• lerna run cypress:run --scope with-nextjs-appdir -- --record --key --group with-nextjs-appdir
• lerna run cypress:run --scope with-nextjs -- --record --key --group with-nextjs
• lerna run cypress:run --scope data-provider-supabase -- --record --key --group data-provider-supabase
• lerna run cypress:run --scope form-mantine-use-modal-form -- --record --key --group form-mantine-use-modal-form
• lerna run cypress:run --scope table-react-table-basic -- --record --key --group table-react-table-basic
• lerna run cypress:run --scope table-react-table-advanced -- --record --key --group table-react-table-advanced
• lerna run cypress:run --scope data-provider-strapi-v4 -- --record --key --group data-provider-strapi-v4
• lerna run cypress:run --scope table-material-ui-use-update-many -- --record --key --group table-material-ui-use-update-many
• lerna run cypress:run --scope table-material-ui-use-delete-many -- --record --key --group table-material-ui-use-delete-many
• lerna run cypress:run --scope inferencer-headless -- --record --key --group inferencer-headless
• lerna run cypress:run --scope table-material-ui-use-data-grid -- --record --key --group table-material-ui-use-data-grid
• lerna run cypress:run --scope table-material-ui-table-filter -- --record --key --group table-material-ui-table-filter
• lerna run cypress:run --scope inferencer-graphql-hasura -- --record --key --group inferencer-graphql-hasura
• lerna run cypress:run --scope form-mantine-use-form -- --record --key --group form-mantine-use-form
• lerna run cypress:run --scope table-material-ui-data-grid-pro -- --record --key --group table-material-ui-data-grid-pro
• lerna run cypress:run --scope base-material-ui -- --record --key --group base-material-ui
• lerna run cypress:run --scope table-antd-advanced -- --record --key --group table-antd-advanced
• lerna run cypress:run --scope table-material-ui-cursor-pagination -- --record --key --group table-material-ui-cursor-pagination
• lerna run cypress:run --scope inferencer-chakra-ui -- --record --key --group inferencer-chakra-ui
• lerna run cypress:run --scope table-material-ui-advanced -- --record --key --group table-material-ui-advanced
• lerna run cypress:run --scope base-mantine -- --record --key --group base-mantine
• lerna run cypress:run --scope server-side-form-validation-material-ui -- --record --key --group server-side-form-validation-material-ui
• lerna run cypress:run --scope form-mantine-use-drawer-form -- --record --key --group form-mantine-use-drawer-form
• lerna run cypress:run --scope form-react-hook-form-use-form -- --record --key --group form-react-hook-form-use-form
• lerna run cypress:run --scope server-side-form-validation-mantine -- --record --key --group server-side-form-validation-mantine
• lerna run cypress:run --scope table-mantine-basic -- --record --key --group table-mantine-basic
• lerna run cypress:run --scope form-material-ui-use-steps-form -- --record --key --group form-material-ui-use-steps-form
• lerna run cypress:run --scope server-side-form-validation-chakra-ui -- --record --key --group server-side-form-validation-chakra-ui
• lerna run cypress:run --scope table-mantine-advanced -- --record --key --group table-mantine-advanced
• lerna run cypress:run --scope form-chakra-ui-mutation-mode -- --record --key --group form-chakra-ui-mutation-mode
• lerna run cypress:run --scope inferencer-antd -- --record --key --group inferencer-antd
• lerna run cypress:run --scope form-material-ui-use-modal-form -- --record --key --group form-material-ui-use-modal-form
• lerna run cypress:run --scope server-side-form-validation-antd -- --record --key --group server-side-form-validation-antd
• lerna run cypress:run --scope auth-mantine -- --record --key --group auth-mantine
• lerna run cypress:run --scope base-chakra-ui -- --record --key --group base-chakra-ui
• lerna run cypress:run --scope table-handson -- --record --key --group table-handson
• lerna run cypress:run --scope inferencer-material-ui -- --record --key --group inferencer-material-ui
• lerna run cypress:run --scope auth-keycloak -- --record --key --group auth-keycloak
• lerna run cypress:run --scope table-chakra-ui-basic -- --record --key --group table-chakra-ui-basic
• lerna run cypress:run --scope form-material-ui-use-form -- --record --key --group form-material-ui-use-form
• lerna run cypress:run --scope base-antd -- --record --key --group base-antd
• lerna run cypress:run --scope form-antd-use-steps-form -- --record --key --group form-antd-use-steps-form
• lerna run cypress:run --scope form-mantine-mutation-mode -- --record --key --group form-mantine-mutation-mode
• lerna run cypress:run --scope table-chakra-ui-advanced -- --record --key --group table-chakra-ui-advanced
• lerna run cypress:run --scope form-save-and-continue -- --record --key --group form-save-and-continue
• lerna run cypress:run --scope auth-material-ui -- --record --key --group auth-material-ui
• lerna run cypress:run --scope form-material-ui-use-drawer-form -- --record --key --group form-material-ui-use-drawer-form
• lerna run cypress:run --scope auth-headless -- --record --key --group auth-headless
• lerna run cypress:run --scope form-antd-use-modal-form -- --record --key --group form-antd-use-modal-form
• lerna run cypress:run --scope table-antd-use-update-many -- --record --key --group table-antd-use-update-many
• lerna run cypress:run --scope auth-google-login -- --record --key --group auth-google-login
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=blog-react-aria --scope=auth-material-ui --scope=blog-react-dnd --scope=blog-react-hook-dynamic-form --scope=blog-react-hot-toast --scope=base-antd --scope=blog-react-toastify --scope=blog-refeedback --scope=blog-refine-airtable-crud --scope=bas...
• lerna run cypress:run --scope form-react-hook-form-use-steps-form -- --record --key --group form-react-hook-form-use-steps-form
• lerna run cypress:run --scope table-antd-use-table -- --record --key --group table-antd-use-table
• lerna run cypress:run --scope auth-chakra-ui -- --record --key --group auth-chakra-ui
• lerna run cypress:run --scope inferencer-mantine -- --record --key --group inferencer-mantine
• lerna run cypress:run --scope form-material-ui-mutation-mode -- --record --key --group form-material-ui-mutation-mode
• lerna run cypress:run --scope form-antd-use-form -- --record --key --group form-antd-use-form
• lerna run cypress:run --scope form-react-hook-form-use-modal-form -- --record --key --group form-react-hook-form-use-modal-form
• lerna run cypress:run --scope auth-auth0 -- --record --key --group auth-auth0
• lerna run cypress:run --scope form-antd-use-drawer-form -- --record --key --group form-antd-use-drawer-form
• lerna run cypress:run --scope form-chakra-use-modal-form -- --record --key --group form-chakra-use-modal-form
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=store --scope=form-react-hook-form-use-modal-form --scope=template-antd --scope=template-chakra-ui --scope=template-headless --scope=form-react-hook-form-use-steps-form --scope=template-mantine --scope=template-material-ui --scope=theme-antd-dem...
• lerna run cypress:run --scope table-antd-use-editable-table -- --record --key --group table-antd-use-editable-table
• lerna run cypress:run --scope form-mantine-use-steps-form -- --record --key --group form-mantine-use-steps-form
• lerna run cypress:run --scope auth-antd -- --record --key --group auth-antd
• lerna run cypress:run --scope form-antd-mutation-mode -- --record --key --group form-antd-mutation-mode
• lerna run cypress:run --scope form-chakra-ui-use-form -- --record --key --group form-chakra-ui-use-form
• lerna run cypress:run --scope table-antd-use-delete-many -- --record --key --group table-antd-use-delete-many
• lerna run cypress:run --scope table-antd-table-filter -- --record --key --group table-antd-table-filter
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=access-control-casbin --scope=auth-antd --scope=access-control-cerbos --scope=access-control-permify --scope=app-crm --scope=auth-auth0 --scope=app-crm-minimal --scope=audit-log-provider --scope=auth-kinde --scope=auth-chakra-ui --scope=auth-otp...
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=upload-mantine-base64 --scope=inferencer-mantine --scope=upload-mantine-multipart --scope=upload-material-ui-base64 --scope=upload-material-ui-multipart --scope=inferencer-material-ui --scope=use-infinite-list --scope=use-modal-antd --scope=use-...
• lerna run cypress:run --scope form-chakra-ui-use-drawer-form -- --record --key --group form-chakra-ui-use-drawer-form
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=form-core-use-form --scope=form-mantine-use-steps-form --scope=i18n-nextjs --scope=i18n-react --scope=import-export-antd --scope=form-material-ui-mutation-mode --scope=import-export-mantine --scope=import-export-material-ui --scope=input-custom ...
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=table-antd-table-filter --scope=table-antd-use-delete-many --scope=table-antd-use-editable-table --scope=table-antd-use-table --scope=table-antd-use-update-many --scope=table-chakra-ui-advanced --scope=table-chakra-ui-basic --scope=table-handson...
• lerna run cypress:run --scope form-antd-custom-validation -- --record --key --group form-antd-custom-validation
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=data-provider-airtable --scope=form-chakra-ui-use-drawer-form --scope=data-provider-appwrite --scope=data-provider-appwrite-tutorial-docs --scope=data-provider-hasura --scope=form-chakra-ui-use-form --scope=data-provider-multiple --scope=data-pr...
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=@refinedev/core --scope=blog-refineflix --scope=form-antd-custom-validation --scope=blog-responsive-navbar --scope=blog-win95 --scope=calendar-app --scope=form-antd-mutation-mode --scope=command-palette-kbar --scope=core-use-import --scope=core-use-menu --scope=form-an...

---

Sent with 💌 from NxCloud.

[alicanerdurmaz]

Hello, @ShivamDureja

changeset should be a markdown file in the Refine repo.

You can read changeset documentation to learn how to use and why Refine uses them.

[ShivamDureja]

Hi @alicanerdurmaz , for that Do I need raise PR again?

[alicanerdurmaz]

Hi @alicanerdurmaz , for that Do I need raise PR again?

You can commit the changeset file to this PR

[ShivamDureja]

Thanks @alicanerdurmaz , can you please verify.

[alicanerdurmaz]

Thanks @alicanerdurmaz , can you please verify.

Thanks! But, can you remove one of them, please? We don't want to increment the version twice.