style selected option markup

Author: pawelangelow

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>
@@ -323,7 +323,6 @@ const TlsDetails = (props: Props) => {
                 <EuiSuperSelect
                   placeholder="Select certificate"
                   valueOfSelected={formik.values.selectedTlsClientCertId}
-                  className={styles.selectWithLongTextSupport}
                   options={optionsCertsClient}
                   onChange={(value) => {
                     formik.setFieldValue('selectedTlsClientCertId', value)

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

@@ -167,6 +167,8 @@
   }
 }
 
-.selectWithLongTextSupport {
-  display: block !important;
+.selectedOptionWithLongTextSupport {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 1.5rem;
 }