Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Long redirects urls and paths don't shorten in the UI #4944

Open
kof opened this issue Mar 4, 2025 · 5 comments
Open

Long redirects urls and paths don't shorten in the UI #4944

kof opened this issue Mar 4, 2025 · 5 comments
Labels
complexity:low Good for newcomers, up to a few days of work prio:1 The most important thing to work on type:bug Something isn't working

Comments

@kof
Copy link
Member

kof commented Mar 4, 2025

Discussion

Image

In theory they should be shortened but there is no max width set, so path or url can be long and can make the UI look broken.

@kof kof added type:bug Something isn't working complexity:low Good for newcomers, up to a few days of work prio:1 The most important thing to work on labels Mar 4, 2025
@Zeit08
Copy link

Zeit08 commented Mar 6, 2025

3 ideas:

  • simply making it continue on a second line. So break line.
  • add a V (down pointing arrow) that work as an accordion. So when click it expands the second line
  • making the whole setting window go full screen if needed, like a maximize button on top right.

On top of that an edit button is also nice to have, in situations I only need to change a letter or a / in the url redirect

@Blazing-Mike
Copy link
Contributor

Blazing-Mike commented Mar 11, 2025

I would like to work on this issue, already reproduced it, i implemented the first idea, which is to remove white-space:no-wrap style. here is what it look like after.

Also being able to edit redirects improves UX, just like @Zeit08 suggested.

Cc: @kof

Image

@kof
Copy link
Member Author

kof commented Mar 11, 2025

@Blazing-Mike feel free to send the pr

@Blazing-Mike
Copy link
Contributor

should i send a PR just for break line or i should go ahead with adding an edit button?

@kof
Copy link
Member Author

kof commented Mar 12, 2025

@Blazing-Mike separate prs pls

kof added a commit that referenced this issue Mar 13, 2025
…4988)

## Description

fix issue #4944 
long redirect urls don't shorten, they extend across Project seetings
container and parts of it disappears which make UI looks broken.

i added a word-break to the links, set a width for old link and
max-width for the new-path link.

![Screen Shot 2025-03-12 at 12 02 52
PM](https://github.com/user-attachments/assets/72743a23-9f8b-4df3-abca-65524db8df91)
  

## Steps for reproduction

1. click on Menu button
2. click on "Project settings" Menu item
3. Click on the Redirects on the sidebar
4. Input old-path and new-path or URL
5. Click Add

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

---------

Co-authored-by: Oleg Isonen <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
complexity:low Good for newcomers, up to a few days of work prio:1 The most important thing to work on type:bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants