fix(console): remove connector id and prevent text overflow (#2072)

packages/console/src/components/Tooltip/index.module.scss

@@ -46,11 +46,6 @@
   }
 
   .content {
-    // https://css-tricks.com/almanac/properties/l/line-clamp/
-    /* stylelint-disable-next-line value-no-vendor-prefix */
-    display: -webkit-box;
-    -webkit-line-clamp: 6;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+    @include _.multi-line-ellipsis(6);
   }
 }

packages/console/src/pages/Connectors/components/CreateForm/index.module.scss

@@ -45,8 +45,7 @@
           font: var(--font-body-small);
           color: var(--color-caption);
           margin-top: _.unit(1);
-          height: 60px;
-          overflow: hidden;
+          @include _.multi-line-ellipsis(3);
         }
       }
     }

packages/console/src/pages/Connectors/components/CreateForm/index.tsx

@@ -127,9 +127,6 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
                     <div className={styles.name}>
                       <UnnamedTrans resource={name} />
                     </div>
-                    {type !== ConnectorType.Social && (
-                      <div className={styles.connectorId}>{id}</div>
-                    )}
                     <div className={styles.description}>
                       <UnnamedTrans resource={description} />
                     </div>

packages/console/src/scss/_underscore.scss

@@ -86,3 +86,13 @@
     transform: translateX(100%);
   }
 }
+
+@mixin multi-line-ellipsis($line) {
+  // https://css-tricks.com/almanac/properties/l/line-clamp/
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

packages/ui/src/components/BrandingHeader/index.module.scss

@@ -43,11 +43,6 @@ $logo-height: 60px;
     font: var(--font-title-small);
     color: var(--color-text);
     text-align: center;
-    text-overflow: ellipsis;
-    /* stylelint-disable-next-line value-no-vendor-prefix */
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+    @include _.multi-line-ellipsis(2);
   }
 }

packages/ui/src/scss/_underscore.scss

@@ -43,3 +43,13 @@
 @function border($color: transparent, $width: 1) {
   @return #{$width}px solid #{$color};
 }
+
+@mixin multi-line-ellipsis($line) {
+  // https://css-tricks.com/almanac/properties/l/line-clamp/
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}