Graycot / loop-ring

GNU General Public License v3.0
10 stars 22 forks source link

Fix memberlist.html CSS on mobile viewports. #9

Closed Graycot closed 1 year ago

Graycot commented 1 year ago

Problem experienced:

The member list table extends past the right edge of the screen requiring horizontal scrolling to view the entire data field.

Suspected Cause:

If the URL of a member-site is too long, it forces the text field to grow horizontally to the right off the edge of the screen.

Proposed fix:

Cut off URLS that exceed the maximum width of the data field by implementing an ellipses.

Example fix of a cutoff URL:

""https://Examp...""

Graycot commented 1 year ago

MVP Solution:

.siteURL {
  overflow-wrap: anywhere;
}

I settled on overflow wrapping the siteURL because I would rather provide the user more information about a link they may click on rather than obfuscating info for the sake of aesthetics. Currently the mobile viewport can become as small as 273px horizontal before the table overflows again. I suspect that other extremely long .data fields could also break overflow, but that is a niche edge case that I have not yet experienced. I will likely revisit this later to implement a holistic solution that I will send to the upstream O-Ring repository so other's who may experience this hypothetical edge case will not have their member lists broken on mobile.