Improve sort dropdown and communities page layout

[Megha-Dev-19]

Resolves #481
Preview link

[ailisp]

3 column and new sorting looks great~ However I observe a problem when the window is not as wide as full screen but more than the half screen, text is overflowed:

There is no such problem if further reduce the window width:

So let's also fix the overflow issue in the first case.

[Megha-Dev-19]

hey @ailisp
I have fixed it, you can check the preview link, but just fyi, I mostly check the UI for the screen sizes which are actively used (like ipad, mobiles, desktop, laptops), the screen size in which the UI broke was not one of them, so I didn't check it
But thanks for the thorough testing

[elliotBraem]

This is a nice select, but needs to be full width

[elliotBraem]

@Megha-Dev-19

There are two PRs for the same story, this one and @itexpert120's #511
This one handles the three column while the other does not

Megha's

Zeeshan's

Zeeshan's has a wide screen Sort bar on mobile while this one does not

Zeeshan's

Megha's

In the codediff, I like how Zeeshan refactored and simplified the Card

[itexpert120]

Ah, mine shows 3 columns on larger screen size.
Also this is old screenshot, can you review my video preview?

[elliotBraem]

@Megha-Dev-19 @itexpert120

Yep, I see now. I was looking at wrong Zeeshan code. Updated and his PR covers all criteria, will merge that one.

Thanks tho @Megha-Dev-19 :)