Closed Graycot closed 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.
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...""