Merge pull request #4222 from RedisInsight/fe/bugfix/ri-6114-super-select-long-name

RI-6114: prevent long text overlapping in SuperSelect

Author: mariasergeenko

redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx

@@ -97,7 +97,7 @@ const TlsDetails = (props: Props) => {
   caCertificates?.forEach((cert) => {
     optionsCertsCA.push({
       value: cert.id,
-      inputDisplay: cert.name,
+      inputDisplay: <span className={styles.selectedOptionWithLongTextSupport}>{cert.name}</span>,
       dropdownDisplay: (
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <div>{truncateText(cert.name, 25)}</div>
@@ -128,7 +128,7 @@ const TlsDetails = (props: Props) => {
   certificates?.forEach((cert) => {
     optionsCertsClient.push({
       value: `${cert.id}`,
-      inputDisplay: cert.name,
+      inputDisplay: <span className={styles.selectedOptionWithLongTextSupport}>{cert.name}</span>,
       dropdownDisplay: (
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <div>{truncateText(cert.name, 25)}</div>

redisinsight/ui/src/pages/home/components/styles.module.scss

@@ -166,3 +166,9 @@
     }
   }
 }
+
+.selectedOptionWithLongTextSupport {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 1.5rem;
+}