fix: responsiveness on long reciept name #238
Conversation
|
@jordan-ae Pls fix the build, otherwise works fine |
|
| table * { | ||
| text-wrap: nowrap; | ||
| } |
There was a problem hiding this comment.
That is there for a reason. Have you seen how it breaks the page on mobile?
I estimated the task to be two hours, because it requires restructuring the table html.
There was a problem hiding this comment.
My mistake it does overlap the buttons on mobile quite a bit more without this
| table * { | ||
| text-wrap: nowrap; | ||
| } |
There was a problem hiding this comment.
My mistake it does overlap the buttons on mobile quite a bit more without this
|
In your screenshot you are using the NFT permit which contains more info than an ERC20 permit. In your screenshot, how do you close the additional details? How do you claim? You should see these buttons underneath the dialogue uncovered and fully visible Try it with the ERC20 permit as that is the permit that's actively been generated, the NFT is not quite yet. As you open and close the additional details dialogue you will see that the dialogue overlaps the button you pressed to open it. |
|
As requested earlier and on TG @jordan-ae. It may affect it in other ways but this stood out to me with css:
without css:
|
|
Really not sure what's up but this shows up okay for me. I tested the impact of removing that line of code and the only apparent one was that the code won't overflow anymore I've tested the display on multiple screen sizes and have not had anything breaking.
|
|
@0x4007 I also dont know if its intentional or its a bug, but when viewing an NFT permit there's no way to navigate back from the details page. |
this specific overlap I'm talking about only happens on mobile |
It is not intentional, it should behave in the exact same way that the ERC20 permit behaves. I will open a separate issue for it. NFTs are not rolled out atm afaik so it's not high priority or app breaking |
This is on mobile I can send in a full screenshot if that helps
|
You have to click additionalDetails and open the dialogue to repro this overlap, it does not overlap without interaction. Devtools, mobile-view and all templates show the overlap. The spec targets the ENS name overflowing, the removal of the CSS is producing the overlap because the table is resizing itself rather than being fixed. The difference in these two images is that the first ENS name is
Note that an actual ENS name will be one string likely without spaces, I have added spaces between each here so that it wraps as expected.
As opposed to the string you'll need to handle which is
|
|
@Keyrxng thanks for the remarks. I noticed @0x4007 made the address to have an ellipsis when it gets to long. It didn't work because he forgot to add a max-width, so I've got that working now. So the sender address doesnt break and cause the glitch anymore. Before committing just wanted to get you guys opinion on if I should do an ellipsis on the front too or just make it wrap when the text gets too long. |
|
Ellipsis generally is preferred but I am unsure if there are new problems caused by setting max-width on the table. |
|
@jordan-ae Pls mark this PR as "ready for review" when you're finished, as far as I understand the only question was regarding ellipsis which is answered here |
Resolves #237