From 68610fd86ee5e7059381edba2665145974139973 Mon Sep 17 00:00:00 2001
From: huongg <huongg1409@gmail.com>
Date: Mon, 20 May 2024 10:26:03 +0100
Subject: [PATCH] set max-width for url box

Signed-off-by: huongg <huongg1409@gmail.com>
---
 .../shareable-url-modal.js                    |  1 +
 .../shareable-url-modal/url-box/url-box.js    |  9 +++--
 .../shareable-url-modal/url-box/url-box.scss  | 34 +++++++++++--------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 293ec9bdb2..aba651767e 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -325,6 +325,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   ))}
                 </Dropdown>
                 <UrlBox
+                  className="url-box__wrapper--half-width"
                   url={url}
                   onClick={() => onCopyClick(url)}
                   href={handleResponseUrl()}
diff --git a/src/components/shareable-url-modal/url-box/url-box.js b/src/components/shareable-url-modal/url-box/url-box.js
index 2e7f94cd50..7a2f9575dc 100644
--- a/src/components/shareable-url-modal/url-box/url-box.js
+++ b/src/components/shareable-url-modal/url-box/url-box.js
@@ -1,10 +1,15 @@
+import classnames from 'classnames';
 import Tooltip from '../../ui/tooltip';
 import Button from '../../ui/button';
 
 import './url-box.scss';
 
-const UrlBox = ({ url, onClick, href, showCopiedText }) => (
-  <div className="url-box__wrapper">
+const UrlBox = ({ className, url, onClick, href, showCopiedText }) => (
+  <div
+    className={classnames('url-box__wrapper', {
+      [`${className}`]: className,
+    })}
+  >
     <div className="url-box__result-url-wrapper">
       <a
         className="url-box__result-url"
diff --git a/src/components/shareable-url-modal/url-box/url-box.scss b/src/components/shareable-url-modal/url-box/url-box.scss
index 43c1b2ab63..35cf6eb069 100644
--- a/src/components/shareable-url-modal/url-box/url-box.scss
+++ b/src/components/shareable-url-modal/url-box/url-box.scss
@@ -7,26 +7,32 @@
   width: 100%;
   justify-content: space-between;
   text-overflow: ellipsis;
+}
 
-  a {
-    color: var(--color-deployed-link);
-    font-size: 16px;
-    line-height: 32px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding-left: 16px;
-    font-family: inherit;
-    text-decoration: underline;
-    width: 90%;
-  }
+.url-box__wrapper--half-width {
+  width: 50%;
 }
 
 .url-box__result-url-wrapper {
-  width: 27em;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 510px;
+}
+
+.url-box__result-url {
+  color: var(--color-deployed-link);
+  font-size: 16px;
+  line-height: 32px;
+  cursor: pointer;
+  align-items: center;
+  padding-left: 16px;
+  font-family: inherit;
+  text-decoration: underline;
+  width: 90%;
+  display: block;
   white-space: nowrap;
   overflow: hidden;
-  display: flex;
   text-overflow: ellipsis;
 }