[Responsiveness]: Improve mobile responsiveness for components page with props table

[karankoder]

Product

Kolibri Design System (KDS)

Desired behavior

For screens with a width of less than 500px, all sections on component pages should match the width of the props table. This will ensure a consistent layout and improve readability on smaller screens.

Current behavior

On screens smaller than 500px, pages containing a props table (e.g., KCard component page) have inconsistent section widths. Some sections are narrower than the props table, causing a misaligned and cluttered appearance.

Screenshots attached for reference.

The Value Add

This change will improve the user experience by making the design system more accessible on mobile devices. Consistent section widths will enhance readability and ensure a more polished, professional look.

Additional Notes

If this issue is valid, I would like to work on it and submit a PR for the fix. Please let me know if any guidelines or specific approaches should be followed.

[MisRob]

Hi @karankoder, thank you for the suggestion - yes this would be another valuable improvement for smaller screen sizes. I am happy to let you work on it, however note that it may take us 2+ weeks to review new pull requests as we have a large queue.

The desired behavior makes sense to me. The only note

For screens with a width of less than 500px

I am not quite yet sure about the most suitable breakpoint value. I wanted to note that recently in this PR some new breakpoints were introduced to make the sidebar responsive.

Would you be able to find a good value that works generally well, define it as a constant, and re-use it for this issue as well as in the existing sidebar logic? To prevent from random pixel values scattered all over the codebase.

[MisRob]

Also I think we don't need to limit this only to components pages - it would definitely be good if the content area of all pages took all available space on smaller screens.

[karankoder]

Hi @MisRob

Thanks for the details! I noticed that while the mentioned PR applies a breakpoint at 768px, the sections actually start shrinking below 1000px. To maintain consistency and improve responsiveness, I’m considering introducing a breakpoint around 900px.

Untitled.video.-.Made.with.Clipchamp.8.mp4

I've also attached a video demonstrating the issue. Let me know if you have any thoughts on this approach!

[karankoder]

Also I think we don't need to limit this only to components pages - it would definitely be good if the content area of all pages took all available space on smaller screens.

That makes perfect sense! Expanding this beyond just the components pages and ensuring all pages make full use of the available space on smaller screens would be a valuable improvement.

With this in mind, there’s quite a bit of work to be done—I’ll review all affected pages, adjust the layout where necessary, and ensure consistency across breakpoints. I’ll start working on this and keep you posted on my progress. Let me know if there are any specific aspects you’d like me to focus on!

[MisRob]

That makes sense @karankoder. Yes, you may need to introduce a new breakpoint. The most important is meaningful and consistent experience, and maintenance ease for developers. I think you're on it so feel free to play around and we can tweak details in a pull request review. High-level I feel this is a good direction.

[learning-equality-bot]

Automatically unassigning @karankoder due to no comments here, or updates on the associated pull request for 1 month. @karankoder, if you're still interested in this issue or already have work in progress, please message us here, and we'll assign you again. Thank you!