set max-width for url box

Signed-off-by: huongg <[email protected]>
kedro-org · May 20, 2024 · 68610fd · 68610fd
1 parent 6a88863
commit 68610fd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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;
 }