[SPT-767] fixed model names overflowing

singnet · Jan 14, 2025 · 9252489 · 9252489
1 parent 03111c6
commit 9252489
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/components/ServiceDetails/ExistingModel/ModelDetails/index.js b/src/components/ServiceDetails/ExistingModel/ModelDetails/index.js
@@ -77,7 +77,9 @@ const ModelDetails = ({ classes, openEditModel, model }) => {
       <div className={classes.modelDetailsContainer}>
         <div className={classes.modelDetails}>
           <div className={classes.titleIdContainer}>
-            <h2>{model.modelName}</h2>
+            <div className={classes.modelNameContainer}>
+              <h2>{model.modelName}</h2>
+            </div>
             <h3>
               Model id: <span>{model.modelId}</span>
             </h3>

diff --git a/src/components/ServiceDetails/ExistingModel/ModelDetails/styles.js b/src/components/ServiceDetails/ExistingModel/ModelDetails/styles.js
@@ -25,13 +25,40 @@ export const useStyles = (theme) => ({
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
+    flexWrap: "wrap",
     "& h3": {
       margin: 0,
       color: theme.palette.text.darkShadedGray,
       fontSize: 18,
       lineHeight: "23px",
     },
   },
+  modelNameContainer: {
+    width: "100%",
+    textAlign: "left",
+    position: "relative",
+    minHeight: "2rem",
+    "& h2": {
+      width: "100%",
+      overflow: "hidden",
+      lineBreak: "anywhere",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      height: "min-content",
+      "-webkit-line-clamp": 1,
+      "-webkit-box-orient": "vertical",
+      transition: "all 0.1s",
+    },
+    "& h2:hover": {
+      position: "absolute",
+      overflow: "auto",
+      height: "min-content",
+      backgroundColor: theme.palette.text.gray1,
+      "-webkit-line-clamp": 10,
+      borderRadius: 5,
+      transition: "all 0.1s",
+    },
+  },
   descriptionContainer: {
     fontSize: 18,
   },

diff --git a/src/components/ServiceDetails/TrainingModels/CreateModel/Data/styles.js b/src/components/ServiceDetails/TrainingModels/CreateModel/Data/styles.js
@@ -40,7 +40,6 @@ export const useStyles = (theme) => ({
     },
   },
   uploadDatasetContainer: {
-    marginTop: 40,
     "& > span": {
       color: theme.palette.text.darkShadedGray,
       fontSize: 14,