Sources table does not show the full URL in mobile size

[kajalmultidots]

Description

In the below URL, the table content is not showing properly in the responsive(320px) design.
Page URL: https://wordpress.org/openverse/sources/

For better understanding, I provided the Video attachment
Video URL: https://share.cleanshot.com/N09QQ0MzRdKvJ4fZkV8t

Thanks.

Implementation

Designs were cleaned-up for dev, and are ready for implementation.

Component to update: frontend/src/components/VSourcesTable.vue

[krysal]

Thank you for reporting this error, @kajalmultidots. The video is very helpful.

[fcoveram]

Here are two ideas where I would like your thoughts.

Stacked rows

Stack each row when the screen reaches the sm breakpoint.

sm breakpoint	xs breakpoint

One benefit is that all info is displayed on the page without additional scroll bars. Even when columns are not sortable, I'm drawn to this solution as data is not in a comparison or evaluation context; in contrast to other spreadsheets like sales or number evolutions where cells side by side ease the table meaning.

I found this example from this Smashing magazine post for reference.

Scrollbar table

A second alternative could be to make the table scrollable horizontally and add a shadow indicating the scroll direction.

sm breakpoint	xs breakpoint

I personally don't like this alternative as on small screens the interaction feels clunky due to the bi-directional scrollbar in small screens.

What do you think of this?

---

Updates from Design Library

In addition to the above, I applied spacing tweaks based on the latest updates in the Design Library. The main changes are:

• In 2xl / xl / lg
  • Content wrapper has a max-width of 768px
  • Margin top is 40px and bottom 96px
• In md / sm
  • Margins: top is 20px, sides and bottom are 40px
• In xs
  • Margins: top is 20px, sides are 24px, bottom is 40px

Designs

Figma file: Responsive source tables

[zackkrida]

Hi @kajalmultidots, do you have any feedback concerning the design proposal for the issue you raised?

@fcoveram, if we don't get any community feedback on this particular issue I think you can pick whichever you prefer and mark this ready for work.

[krysal]

I greatly like the stacked rows; they look more appropriate for a small screen. Horizontal scrolling can sometimes be problematic on the phone, as Android uses that gesture to go back to pages or apps.

[fcoveram]

Seeing the mockups after a month of sharing them, and I agree with @krysal that stacked rows looks better. Let's go with that one.

Designs were cleaned-up for dev.

[szymon-polaczy]

Hi, Is this something I could help with?

[krysal]

@szymon-polaczy It's up for grabs if you like!

[szymon-polaczy]

Great, in that case I'd like to snatch it

[kajalmultidots]

Hi @zackkrida ,

sorry I missed your message. I think @fcoveram provided the design mockup is looks good. Great work @fcoveram 🎉 .

Thanks all for your work 👍