From b8bcdfa44246641bed6e2898853759a70130bca8 Mon Sep 17 00:00:00 2001
From: Blazing-mike <adebambomichael5@gmail.com>
Date: Tue, 11 Mar 2025 22:20:36 +0000
Subject: [PATCH 1/4] break and edit btn

---
 .../project-settings/section-redirects.tsx    | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/apps/builder/app/builder/features/project-settings/section-redirects.tsx b/apps/builder/app/builder/features/project-settings/section-redirects.tsx
index ab1f4173d0bd..68a55dc6c580 100644
--- a/apps/builder/app/builder/features/project-settings/section-redirects.tsx
+++ b/apps/builder/app/builder/features/project-settings/section-redirects.tsx
@@ -1,21 +1,19 @@
-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,
+  truncate,
 } from "@webstudio-is/design-system";
 import { ArrowRightIcon, TrashIcon } from "@webstudio-is/icons";
 import {
@@ -23,9 +21,11 @@ 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 = () => {
@@ -33,6 +33,9 @@ export const SectionRedirects = () => {
   const [redirects, setRedirects] = useState(
     () => $pages.get()?.redirects ?? []
   );
+
+  const [editingId, setEditingId] = useState(null);
+  const [updatedPath, setUpdatedPath] = useState("");
   const [oldPath, setOldPath] = useState<string>("");
   const [newPath, setNewPath] = useState<string>("");
   const [httpStatus, setHttpStatus] =
@@ -224,7 +227,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}>
@@ -262,19 +265,30 @@ export const SectionRedirects = () => {
                               redirect.new,
                               publishedOrigin
                             ).toString()}
-                            css={truncate()}
+                            css={{
+                              wordBreak: "break-all",
+                              maxWidth: theme.spacing[32],
+                            }}
                             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)}
+                        />
+                        <Button
+                          onClick={handleAddRedirect}
+                          css={{ flexShrink: 0 }}
+                        >
+                          Edit
+                        </Button>
+                      </Flex>
                     </Flex>
                   </ListItem>
                 );

From 43e9759f1280386887fdebda972b32bcc843561b Mon Sep 17 00:00:00 2001
From: Blazing-mike <adebambomichael5@gmail.com>
Date: Wed, 12 Mar 2025 10:30:09 +0000
Subject: [PATCH 2/4] remove edit btn; would do that in another pr

---
 .../features/project-settings/section-redirects.tsx       | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/apps/builder/app/builder/features/project-settings/section-redirects.tsx b/apps/builder/app/builder/features/project-settings/section-redirects.tsx
index 68a55dc6c580..eb7e907971f3 100644
--- a/apps/builder/app/builder/features/project-settings/section-redirects.tsx
+++ b/apps/builder/app/builder/features/project-settings/section-redirects.tsx
@@ -34,8 +34,6 @@ export const SectionRedirects = () => {
     () => $pages.get()?.redirects ?? []
   );
 
-  const [editingId, setEditingId] = useState(null);
-  const [updatedPath, setUpdatedPath] = useState("");
   const [oldPath, setOldPath] = useState<string>("");
   const [newPath, setNewPath] = useState<string>("");
   const [httpStatus, setHttpStatus] =
@@ -282,12 +280,6 @@ export const SectionRedirects = () => {
                           aria-label={`Delete redirect from ${redirect.old}`}
                           onClick={() => handleDeleteRedirect(index)}
                         />
-                        <Button
-                          onClick={handleAddRedirect}
-                          css={{ flexShrink: 0 }}
-                        >
-                          Edit
-                        </Button>
                       </Flex>
                     </Flex>
                   </ListItem>

From e5b549c3a6d05649e237c3636d2d4a2897052b3b Mon Sep 17 00:00:00 2001
From: Blazing-mike <adebambomichael5@gmail.com>
Date: Wed, 12 Mar 2025 10:51:43 +0000
Subject: [PATCH 3/4] add wordbreak and width to old link

---
 .../features/project-settings/section-redirects.tsx       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/builder/app/builder/features/project-settings/section-redirects.tsx b/apps/builder/app/builder/features/project-settings/section-redirects.tsx
index eb7e907971f3..350eb113c2be 100644
--- a/apps/builder/app/builder/features/project-settings/section-redirects.tsx
+++ b/apps/builder/app/builder/features/project-settings/section-redirects.tsx
@@ -13,7 +13,6 @@ import {
   Text,
   theme,
   Tooltip,
-  truncate,
 } from "@webstudio-is/design-system";
 import { ArrowRightIcon, TrashIcon } from "@webstudio-is/icons";
 import {
@@ -246,7 +245,10 @@ export const SectionRedirects = () => {
                               redirect.old,
                               publishedOrigin
                             ).toString()}
-                            css={truncate()}
+                            css={{
+                              width: theme.spacing[18],
+                              wordBreak: "break-all",
+                            }}
                             target="_blank"
                           >
                             {redirect.old}
@@ -265,7 +267,7 @@ export const SectionRedirects = () => {
                             ).toString()}
                             css={{
                               wordBreak: "break-all",
-                              maxWidth: theme.spacing[32],
+                              maxWidth: theme.spacing[30],
                             }}
                             target="_blank"
                           >

From 08d39064a2b656389147e46f3fe1522ef6d36c24 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 12 Mar 2025 11:34:01 +0000
Subject: [PATCH 4/4] test