fix: Long redirects urls and paths don't shorten in the UI (#4944) (#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]>

Author: Blazing-Mike

apps/builder/app/builder/features/project-settings/section-redirects.tsx

@@ -1,20 +1,17 @@
-import { useState, type ChangeEvent, useRef } from "react";
-import { flushSync } from "react-dom";
 import { useStore } from "@nanostores/react";
 import {
-  Grid,
+  Button,
   Flex,
+  Grid,
+  InputErrorsTooltip,
   InputField,
-  Button,
-  Text,
-  theme,
+  Link,
   List,
   ListItem,
-  SmallIconButton,
-  InputErrorsTooltip,
   Select,
-  Link,
-  truncate,
+  SmallIconButton,
+  Text,
+  theme,
   Tooltip,
 } from "@webstudio-is/design-system";
 import { ArrowRightIcon, TrashIcon } from "@webstudio-is/icons";
@@ -23,16 +20,19 @@ import {
   PageRedirect,
   ProjectNewRedirectPath,
 } from "@webstudio-is/sdk";
+import { useRef, useState, type ChangeEvent } from "react";
+import { flushSync } from "react-dom";
+import { matchPathnamePattern } from "~/builder/shared/url-pattern";
 import { $pages, $publishedOrigin } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
-import { matchPathnamePattern } from "~/builder/shared/url-pattern";
 import { getExistingRoutePaths, sectionSpacing } from "./utils";
 
 export const SectionRedirects = () => {
   const publishedOrigin = useStore($publishedOrigin);
   const [redirects, setRedirects] = useState(
     () => $pages.get()?.redirects ?? []
   );
+
   const [oldPath, setOldPath] = useState<string>("");
   const [newPath, setNewPath] = useState<string>("");
   const [httpStatus, setHttpStatus] =
@@ -224,7 +224,7 @@ export const SectionRedirects = () => {
       {redirectKeys.length > 0 ? (
         <Grid css={sectionSpacing}>
           <List asChild>
-            <Flex direction="column" gap="1">
+            <Flex direction="column" gap="1" align="stretch">
               {redirects.map((redirect, index) => {
                 return (
                   <ListItem asChild key={redirect.old} index={index}>
@@ -245,7 +245,10 @@ export const SectionRedirects = () => {
                               redirect.old,
                               publishedOrigin
                             ).toString()}
-                            css={truncate()}
+                            css={{
+                              width: theme.spacing[18],
+                              wordBreak: "break-all",
+                            }}
                             target="_blank"
                           >
                             {redirect.old}
@@ -262,19 +265,24 @@ export const SectionRedirects = () => {
                               redirect.new,
                               publishedOrigin
                             ).toString()}
-                            css={truncate()}
+                            css={{
+                              wordBreak: "break-all",
+                              maxWidth: theme.spacing[30],
+                            }}
                             target="_blank"
                           >
                             {redirect.new}
                           </Link>
                         </Tooltip>
                       </Flex>
-                      <SmallIconButton
-                        variant="destructive"
-                        icon={<TrashIcon />}
-                        aria-label={`Delete redirect from ${redirect.old}`}
-                        onClick={() => handleDeleteRedirect(index)}
-                      />
+                      <Flex gap="2">
+                        <SmallIconButton
+                          variant="destructive"
+                          icon={<TrashIcon />}
+                          aria-label={`Delete redirect from ${redirect.old}`}
+                          onClick={() => handleDeleteRedirect(index)}
+                        />
+                      </Flex>
                     </Flex>
                   </ListItem>
                 );