[Explorer] Prevents collision when owned object has more text

[apburnie]

The Problem

The problem is that when the owned objects have long pieces of summary text, this text collides. This can be seen here: https://explorer.devnet.sui.io/addresses/0x9b598c9c5f28c94a660d3cbc047f67a510a60e7a

The Solution in Action

With longer text

With shorter text

[mystie711]

@Andrew47 in addition to adding details for rules (max line of text to show) i have also added details for small screen size breakpoints in this Figma here,
https://www.figma.com/file/kSD0qXCIDZA4KQVNepA5hR/02-Explorer?node-id=204%3A48379

[apburnie]

Following the updated Figma Design, how the problem of collision is met has has been updated to now add an ellipsis when text overruns 3 lines.

The below screenshot was captured on Mozilla Firefox, but the effect is the same on Google Chrome, Microsoft Edge and Safari:

[mystie711]

Looking much better @Andrew47 . May I request a few more tweaks to improve the layout,

• padding between columns -> 40px
• empty placeholder asset when we don’t have an image -> use the assets with the image icon in Figma
• padding between image and text should be 15 (looks a lot more in the screenshot attached to task)
• space between items on mobile - let’s update it to 10px (new request)

[mystie711]

Totally lost track of plot. this task is not meant for the updates in my last comment.
will file a new task for it. Please ignore my comments above.