[Mobile] Better delimitate the posts navigation links

[alinclamba]

At the moment, on mobile, when viewing a Single Post, the posts's navigation links seems to be too tight. Maybe we could delimitate them a bit.

[madalingorbanescu]

My suggestion would be hiding the next and previous article titles on mobiles. Space is essential on mobiles and currently, those titles covering almost 30% of a phone screen when titles are 2 lines long.

After this change, this is how post navigation will look on mobiles:

What do you think @georgeolaru?

[georgeolaru]

Thanks for bringing this up @alinclamba and for your suggestion @madalingorbanescu!

I was thinking about this section and I notice that it's missing a proper title to designate what it does (eg. Read Next or Posts Navigation). While it works on desktop with the Previous and Next labels placed naturally on the left and right side, it's confusing on smaller screens, where it's usually space only for a single column.

My suggestion is to transform this section on mobile and create a call-to-action button out of the first link (I think we should reorder and place the Next article first).

Design-wise, the section should go full-width with a highlighted color variation for the background. This color will be customizable from the future FSE as it works with many variations from the color system – example.

Let me know if you have any thoughts or we can go into development.

→ Here is the mockup in Figma.

[madalingorbanescu]

Hey @georgeolaru,

Here is how everything looks after the latest changes

One thing that I saw in this mockup and I think we should apply, is mobile header height. Currently, padding-top and padding-bottom is too big. Should I update it to match the mockup?

Also, the search button is visible inside the navigation menu overlay

[georgeolaru]

Nice work @madalingorbanescu!

@alinclamba What do you think about this solution to your raised issue?

---

Good catch with the larger Header height — I think we could reduce the padding and aim for ~60px height to make more room for the content. See here the original mockup for reference.

As for the other difference, I think the Search button is ok as-it-is now – we already have a Shopping Cart in the main menu bar, so there is no room for more.

Ideally, the right side of the logo should always have a call to action button, be it a Shopping Cart, a Search button, the Dark Mode switcher, or even a link button. If you want to make a step further, take into consideration the case when there is no Shopping Cart in the menu and replace it with the Search.

[alinclamba]

@georgeolaru thanks for already considering this issue. I think the approach you proposed is the best we can do for mobile. @madalingorbanescu good job! 👏

[madalingorbanescu]

Solved in https://github.com/pixelgrade/rosa2/commit/958db140f20858f3c99dd19a77c54eceb0a297cd