Very long codes break UI

[CodeAlDente]

Shlink web client version

• Version: 3.7.3
• app.shlink.io

Summary

When you create short URLs with a very long code, it will break the UI as the codes are shown in full length.

Current behavior

Code is shown in full length in UI

Expected behavior

Show only N characters of code to avoid breaking the UI

How to reproduce

1. Create a short URL with a code length of e.g. 100
2. Go to overview

[acelaya]

Can you provide some screenshots?

[CodeAlDente]

[acelaya]

I see. Thanks for reporting it

[CodeAlDente]

Just some ideas. Maybe the short URL shouldn't be linked but instead showing the code in full length when clicking on it? I would rather place an "open in new tab" icon linked to it right next to the copy-icon.

[acelaya]

I'll go for now with something more pragmatic, just to fix the broken experience. Probably just allow multiline, as it happens with the long URL.

Later I will reconsider the experience as a whole, but for a later release. For that I will take into consideration your ideas, and probably explore how other services do it.

(I miss not having a UX expert involved with the project 😅)

[CodeAlDente]

Allowing multiline would be a better solution than just showing the code in full length:

I've tried to set the length to 1000 but it failed. It only saves the first 255 characters. I think that is the limit for the record in database, right? Maybe this limit should be applied to the UI as well (quick and dirty fix would be to set it to max-attribute).
Also, if you want to delete such a short URL the modal breaks as the code is too long for it as well. Displaying the code in a readonly-input field should solve this issue as most of us copy and paste it into the field anyways.

In my opinion, we should just go with a max length of like 20 or something. But I understand, that sometimes you don't want to use the code itself but a slug which then would hit that limit quickly.

[acelaya]

Fixing the table is trickier than I anticipated, because there's a reason for the indivisible cells.

For now have changed it to crop too long URLs with an ellipsis, while they still show the same in mobile devices.

I will give it another thought after this release, to see if I can come up with something better.

[acelaya]

For the deletion modal, I have changed the approach, so that you just have to write "delete" for confirmation.

In the end it's an extra security measure that requires the user interation, to avoid accidental deletions. What is actually written in the box is not really important.

[acelaya]

As per the maximum 255 characters, I won't do anything about that yet, because:

• It's a limit set at persistence level (in the database column), so it doesn't feel right to couple the UI with that. I will think on a more obvious way to handle it, where maybe the service can expose the configured values, and also validate them instead of cropping them.
• I would like to improve the experience, by displaying the max value and how many characters have already been written. The problem is that the field is now designed to be small, expecting short values, which limits the space for this.

Improvements will come on upcoming releases. For now I will just consider it an edge case.