Responsive issues on long recipient's name

[gentlementlegen]

When the recipient name is long, it overflows the container and on mobile makes the button going out of the screen. See attached screenshots:

The name should probably scroll sideways or simply be cut on overflow.

[0x4007]

Why does it have the opening bracket? What exactly is the value of the recipient here?

[gentlementlegen]

@0x4007 I am not sure. I recently bought an ENS and that's how it displays for me ever since.

[0x4007]

I broke the ens resolver when I disabled web3 gateway on cloudflare and we could never get it working again.

So yes it renders incorrect data consistently.

For example I own several ens names but one is set at the official one. The official one no longer displays, it just picks the first from the list I own now.

[gentlementlegen]

All right I see, thanks for the info. I believe this is worth fixing for that reason then, and because I guess nothing stops a user to have an ENS like my-super-super-cool-and-long-ens-name-becasue-why-not.eth

[jordan-ae]

/start

[ubiquibot]

Deadline	Mon, Jun 3, 10:30 PM UTC
Registered Wallet	0x2F05fD58023B0a95d1866aa0A3b672cEf05945c5

Tips:

• Use /wallet 0x0000...0000 if you want to update your registered payment wallet address.
• Be sure to open a draft pull request as soon as possible to communicate updates on your progress.
• Be sure to provide timely updates to us when requested, or you will be automatically unassigned from the task.

[jordan-ae]

/stop

[ubiquibot]

+ You have been unassigned from the task

[Sadaf-A]

/start

[ubiquibot]

Warning!	This task was created over 32 days ago. Please confirm that this issue specification is accurate before starting.
Deadline	Fri, Jul 5, 8:53 AM UTC
Registered Wallet	0x0BEd00438D57d07E3667b85Fa8EB86Af147C7025

Tips:

• Use /wallet 0x0000...0000 if you want to update your registered payment wallet address.
• Be sure to open a draft pull request as soon as possible to communicate updates on your progress.
• Be sure to provide timely updates to us when requested, or you will be automatically unassigned from the task.

[Sadaf-A]

@0x4007 Hey, I checked with the same dimensions as mentioned in the issue and It seems like this issue has been resolved already

[jordan-ae]

@Sadaf-A it hasn't been fixed yet. Test it with an ENS. Like this one for example my-super-super-cool-and-long-ens-name-becasue-why-not.eth. Also the sender wallet on the details page has a similar responsiveness glitch.

It seems to work fine with wallet addresses but the styling for ENS domains is not where the glitch is visible.

[Keyrxng]

@Sadaf-A The task is ensure that if an ENS name is too long and overflows it's area then it should be gracefully handled.

I would suggest a string manipulation approach personally, as that's how I'd tackle this task for a few reasons. An ENS name can be any length and it'll be hard to account for all of them, also that any CSS changes made will need to be tested to ensure that they do not cause any ripple effects.

Personally, I'd max an ENS display name to the length of an ETH address and add ellipsis if it overflows, ensuring that regardless of length of name the table will not change shape. There is specific formatting currently for addresses that handles ellipsis, we need a similar thing for ENS names but with ... at the end.

---

You can take any approach you like of course, just be mindful of the knock-on effects of adding/modifying CSS.

[Sadaf-A]

@jordan-ae @Keyrxng I'm sorry this is my first time contributing to this repo I checked for wallet address but how do I check for ENS?

[Keyrxng]

@Sadaf-A I'd recommend taking a good look at the README and setting everything up, everything you need should be included but if not let me know.

• ens fetching logic
• ens rendering logic

You can simply force a long name for testing in the logic and ensure it's handled effectively.

[Sadaf-A]

@Sadaf-A I'd recommend taking a good look at the README and setting everything up, everything you need should be included but if not let me know.

• ens fetching logic
• ens rendering logic

You can simply force a long name for testing in the logic and ensure it's handled effectively.

Using README file I'm only able to render wallet addresses it does not mention how to render ENS address

[Keyrxng]

Using README file I'm only able to render wallet addresses it does not mention how to render ENS address

If using anvil account 0 as recommended you would have the ENS name cortex.hiphop. An ENS name is something you buy on-chain and it gives your wallet address an alias, so that's not something we would cover in the the README I'm afraid.

Forcing the conditions will be required for this task unless you have access to a really long ENS name like @gentlementlegen

[Sadaf-A]

Using README file I'm only able to render wallet addresses it does not mention how to render ENS address

If using anvil account 0 as recommended you would have the ENS name cortex.hiphop. An ENS name is something you buy on-chain and it gives your wallet address an alias, so that's not something we would cover in the the README I'm afraid.

Forcing the conditions will be required for this task unless you have access to a really long ENS name like @gentlementlegen

Thanks, I was able to reproduce it

[0x4007]

Using README file I'm only able to render wallet addresses it does not mention how to render ENS address

If using anvil account 0 as recommended you would have the ENS name cortex.hiphop. An ENS name is something you buy on-chain and it gives your wallet address an alias, so that's not something we would cover in the the README I'm afraid.

Forcing the conditions will be required for this task unless you have access to a really long ENS name like @gentlementlegen

Just edit the DOM to have a long name it takes a second or two to do.

[Keyrxng]

@Sadaf-A I'm just checking on progress here, still working on this?

[Sadaf-A]

@Sadaf-A I'm just checking on progress here, still working on this?

My laptop was damaged I had given it for service will continue on this

[Keyrxng]

@Sadaf-A no problem ser, you were over the time limit on another issue also so your assignment was removed there too. If you are happy to continue please re-assign yourself, good luck!

[Sadaf-A]

/start

[ubiquibot-dev]

Deadline	Tue, Aug 13, 6:39 AM UTC
Registered Wallet	0x0BEd00438D57d07E3667b85Fa8EB86Af147C7025

Tips:

• Use /wallet 0x0000...0000 if you want to update your registered payment wallet address.
• Be sure to open a draft pull request as soon as possible to communicate updates on your progress.
• Be sure to provide timely updates to us when requested, or you will be automatically unassigned from the task.

[ubiquibot]

Warning!	This task was created over 71 days ago. Please confirm that this issue specification is accurate before starting.
Deadline	Tue, Aug 13, 6:39 AM UTC
Registered Wallet	0x0BEd00438D57d07E3667b85Fa8EB86Af147C7025

Tips:

• Use /wallet 0x0000...0000 if you want to update your registered payment wallet address.
• Be sure to open a draft pull request as soon as possible to communicate updates on your progress.
• Be sure to provide timely updates to us when requested, or you will be automatically unassigned from the task.

[hydroxylase]

/start

[ubiquity-os]

Warning!	This task was created over 101 days ago. Please confirm that this issue specification is accurate before starting.
Deadline	Wed, Sep 11, 9:05 PM UTC
Beneficiary	0x229674f3db146E0AF0182b660F5c9232538E7e7b

Tips:

• Use /wallet 0x0000...0000 if you want to update your registered payment wallet address.
• Be sure to open a draft pull request as soon as possible to communicate updates on your progress.
• Be sure to provide timely updates to us when requested, or you will be automatically unassigned from the task.

[hydroxylase]

Apparently you want the string to be cut when it exceeds a certain length e.g. "verylong..." and a simple css manipulation??
Is this correct?? I'm new to open contribution you might as well guide me through a bit :-)

[0x4007]

I know the name is truncated @gentlementlegen is this still a valid issue

[gentlementlegen]

This is still happening in production, like shown in the issue screenshots.

[ubiquity-os]

@CaptainPrinz, this task has been idle for a while. Please provide an update.

[ubiquity-os]

@CaptainPrinz, this task has been idle for a while. Please provide an update.

[hydroxylase]

@CaptainPrinz, this task has been idle for a while. Please provide an update.

@Keyrxng has to approve the pull first

[ubiquity-os]

@hydroxylase, this task has been idle for a while. Please provide an update.

[zugdev]

/start

[ubiquity-os]

Warning!	This task was created over 135 days ago. Please confirm that this issue specification is accurate before starting.
Deadline	Tue, Oct 15, 7:12 PM UTC
Beneficiary	0xbB689fDAbBfc0ae9102863E011D3f897b079c80F

Tip

• Use /wallet 0x0000...0000 if you want to update your registered payment wallet address.
• Be sure to open a draft pull request as soon as possible to communicate updates on your progress.
• Be sure to provide timely updates to us when requested, or you will be automatically unassigned from the task.

[zugdev]

QA

ens-demo.webm

[0x4007]

It definitely doesn't make sense to truncate the middle when there's plenty of space on the screen

Also QA needs to be posted on the pull