[front-end] Better UI for very long names and URLs

DigitalCommons · Nov 22, 2024 · 5363a53 · 5363a53
1 parent a2a3fe4
commit 5363a53
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/apps/front-end/src/components/popup/leftPane/LeftPane.tsx b/apps/front-end/src/components/popup/leftPane/LeftPane.tsx
@@ -101,7 +101,9 @@ const LeftPane = ({
   return (
     <StyledLeftPane>
       <StyledHeaderContainer>
-        <Typography variant="h1">{name}</Typography>
+        <Typography variant="h1" sx={{ overflowWrap: "break-word" }}>
+          {name}
+        </Typography>
         {!hasLocation && (
           <Typography variant="subtitle2">
             {t("no_location_available")}

diff --git a/apps/front-end/src/components/popup/rightPane/RightPane.tsx b/apps/front-end/src/components/popup/rightPane/RightPane.tsx
@@ -122,6 +122,8 @@ const RightPane = ({
                     textDecoration: "underline",
                     padding: "0 !important",
                     fontSize: "var(--font-size-xsmall)",
+                    overflowX: "hidden",
+                    textOverflow: "ellipsis",
                   }}
                 >
                   {url}