Screen elements in dashboard - design update in small device - feature request.

[dhrumilk]

we need to update the design for the screen option check box in small devices to look good for the small device user.

we need to set the checkbox in 2 columns.

Dashboard > home > click on the screen option.

[prashantbhivsane]

@oglekler can this be assigned to me?

Added a 2x2 grid for the screen options preferences for smaller screens.

#57977

[marybaum]

Welcome! I agree with you, and while I just told Olga I'd be happy to make a patch, I'm just as happy to assign this to you. I see you already have a patch — great! Next step, then, is testing. We will test your patch, and I invite you to invite all your friends to test it as well — in a local installation you use for development and testing, of course!

[prashantbhivsane]

@dhrumilk could you please test the patch and let me know if there's any feeedback?

[dhrumilk]

@prashantbhivsane I have checked your patch and also apply on my local but it's not working fine it's breaking the other design. Also, I have added braked design Screen short.

[dhrumilk]

@prashantbhivsane applied patch design screen short. (It's not working fine).

[prashantbhivsane]

@dhrumilk could you provide the following? :

1. Plugins you have installed 2. Theme you are using

[dhruvishah2203]

@prashantbhivsane
It's not working on my pc as well. Please check the screenshot given below.
Screenshot : ​https://prnt.sc/9lh9QqenoYm2

[dhrumilk]

@prashantbhivsane I have checked again by removing all plugins and using the Twenty Twenty-Two wordpress theme but it's not working fine and it looks like the current design. but yes I have removed all plugins so the above design is fixed.

Currently, your patch looks like same as the @dhruvishah2203 screenshot.

[prashantbhivsane]

@dhruvishah2203 @dhrumilk would you let me know how you applied the patch? as it is a CSS change (common.css), it should be reflected in the minified css after building the WP

common.min.css

[dhrumilk]

@prashantbhivsane oho sorry I forgot to run my docker. and yes your Patch is working fine for me.
Thank you for correcting me.

[prashantbhivsane]

@dhrumilk no worries!

[ababir]

For small screen, Screen Option check box can stack up like this to make it more easy to use in mobile device.

[prashantbhivsane]

hi @ababir that looks good, but would not that mean screen would have to be scrolled more for additional items? stacking in 2 columns will halve that scrolling.

[ababir]

Replying to prashantbhivsane:

hi @ababir that looks good, but would not that mean screen would have to be scrolled more for additional items? stacking in 2 columns will halve that scrolling.

Hello @prashantbhivsane. You are absolutely right about the scrolling part. Thank you for pointing it out. You have to scroll a bit for additional items. But what I was thinking is this particular section is hidden by default, as this is a drop-down. So, this might not be an issue. On top of that, it will give a clean UI to interact with on a smaller device.

[dhrumilk]

@ababir Your screenshot is more looks good to me. and also it will not create issues in user experience because of the dropdown.
So can you create the diff file for that?

[prashantbhivsane]

@ababir agree with you, I will update the patch.

[prashantbhivsane]

have updated the PR ​https://github.com/WordPress/wordpress-develop/pull/4437

[dhrumilk]

@prashantbhivsane I have verified your PR there are some minor changes. we need to apply CSS for the small device only current will apply for all devices.

[chiragrathod103]

Diff with the responsive CSS should apply

[dhrumilk]

57977.diff looks good to me.

[prashantbhivsane]

PR Updated