This pull request addresses the layout issues described in Issue #295. The changes improve the responsiveness of the InvoiceList component on mobile devices to ensure a better user experience.
Changes Made
Added flex-wrap: wrap; to the SelectContainer in InvoiceListSearchBar to ensure that the search bar items wrap correctly on smaller screens.
Added scroll={{ x: 'max-content' }} to the Table component in InvoiceList to enable horizontal scrolling on smaller devices.
Visual Changes
Before
After
Screen Recording
A screen recording demonstrating the new responsive behavior on mobile devices:
Related Issue
This PR fixes #295.
Notes for Reviewers
Please review the changes and let me know if further adjustments are needed. Thank you!
References
For more details on the Ant Design Table component and its responsive features, please refer to the documentation: Ant Design Table Component
Description
This pull request addresses the layout issues described in Issue #295. The changes improve the responsiveness of the
InvoiceListcomponent on mobile devices to ensure a better user experience.Changes Made
flex-wrap: wrap;to theSelectContainerinInvoiceListSearchBarto ensure that the search bar items wrap correctly on smaller screens.scroll={{ x: 'max-content' }}to theTablecomponent inInvoiceListto enable horizontal scrolling on smaller devices.Visual Changes
Before
After
Screen Recording
A screen recording demonstrating the new responsive behavior on mobile devices:
Related Issue
This PR fixes #295.
Notes for Reviewers
Please review the changes and let me know if further adjustments are needed. Thank you!
References
For more details on the Ant Design Table component and its responsive features, please refer to the documentation: Ant Design Table Component