fix(web): add ellipsis when workspace name or username is too long (#23)

reearth · Oct 23, 2024 · 5063b21 · 5063b21
1 parent a6d9dbc
commit 5063b21
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 7 deletions.
diff --git a/web/src/classic/components/molecules/Common/Header/profile.tsx b/web/src/classic/components/molecules/Common/Header/profile.tsx
@@ -138,10 +138,20 @@ const LabelLeft = styled.div`
 
 const LabelWorkspaceName = styled(Text)`
   margin-top: 2px;
+  max-width: 200px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const LabelUserName = styled(Text)`
   margin-bottom: 2px;
+  max-width: 200px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export default HeaderProfile;
diff --git a/web/src/classic/components/molecules/Dashboard/Workspace.tsx b/web/src/classic/components/molecules/Dashboard/Workspace.tsx
@@ -43,10 +43,13 @@ const Workspace: React.FC<Props> = ({ className, workspace, isPersonal }) => {
     <StyledDashboardBlock className={className} grow={5}>
       <Content direction="column" justify="space-between">
         <WorkspaceHeader align="center" gap={12} wrap="wrap">
-          <Text size={isSmallWindow ? "m" : "xl"} color={theme.classic.main.text} weight="bold">
+          <CustomText
+            size={isSmallWindow ? "m" : "xl"}
+            color={theme.classic.main.text}
+            weight="bold">
             {name}
             {isPersonal && t("'s workspace")}
-          </Text>
+          </CustomText>
           {policy && (
             <Policy
               policy={policy}
@@ -119,4 +122,10 @@ const StyledAvatar = styled(Avatar)`
   margin-right: ${metricsSizes["s"]}px;
 `;
 
+const CustomText = styled(Text)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export default Workspace;
diff --git a/web/src/classic/components/molecules/Settings/NavigationItem/index.tsx b/web/src/classic/components/molecules/Settings/NavigationItem/index.tsx
@@ -48,11 +48,18 @@ const LinkItem = styled(NavLink)`
   }
 `;
 
+//
 const StyledText = styled(Text)<{ level?: 1 | 2 | 3 }>`
+  display: block;
+  display: -webkit-box;
+  max-width: 100%;
+  margin: 0 auto;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: ${({ level }) =>
-    level === 3 ? `${metricsSizes["3xl"]}px}` : level === 2 ? `${metricsSizes["l"]}px` : 0};
+    level === 3 ? `${metricsSizes["3xl"]}px` : level === 2 ? `${metricsSizes["l"]}px` : 0};
 `;
 
 const NavigationList = styled.ul`

diff --git a/web/src/classic/components/molecules/Settings/SettingsHeader/index.tsx b/web/src/classic/components/molecules/Settings/SettingsHeader/index.tsx
@@ -36,11 +36,11 @@ const SettingsHeader: React.FC<Props> = ({ title, currentWorkspace, currentProje
   return (
     <Wrapper>
       <Flex gap={12} align="center">
-        <Text size="xl" color={theme.classic.main.strongText} weight="bold">
+        <CustomText size="xl" color={theme.classic.main.strongText} weight="bold">
           {workspaceName} {workspaceName && (title || currentProject) && " / "}
           {currentProject} {currentProject && title && " / "}
           {title}
-        </Text>
+        </CustomText>
         {policy && !currentProject && !title && (
           <Policy
             policy={policy}
@@ -64,3 +64,10 @@ export default SettingsHeader;
 const Wrapper = styled.div`
   padding: ${metricsSizes["l"]}px 0;
 `;
+
+const CustomText = styled(Text)`
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
diff --git a/web/src/classic/components/molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx b/web/src/classic/components/molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx
@@ -32,9 +32,12 @@ const WorkspaceCell: React.FC<Props> = ({ className, workspace, personal, onSele
       direction="column"
       justify="space-between"
       onClick={() => onSelect?.(workspace)}>
-      <Text size="xl" color={theme.classic.main.text} otherProperties={{ userSelect: "none" }}>
+      <CustomText
+        size="xl"
+        color={theme.classic.main.text}
+        otherProperties={{ userSelect: "none" }}>
         {workspace.name ? workspace.name : t("No Title Workspace")}
-      </Text>
+      </CustomText>
       {personal ? (
         <Text size="m" color={theme.classic.main.weak}>
           {t(
@@ -71,4 +74,11 @@ const StyleAvatar = styled(Avatar)`
   margin-right: ${metricsSizes["s"]}px;
 `;
 
+const CustomText = styled(Text)`
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export default WorkspaceCell;