title: White line in div hides text (custom component)
body: <p>I am currently working in ReactJS together with some SCSS / CSS stylings.</p>
  <p>However, I made a component, that lists number codecs on hover.
  In normal state it's a div, that indicates a small or big damage size.
  When you hover on it, it opens the listed mentioned above.</p>
  <p>For some reason, I always have this white line, ditching my number coded so I can't be read. What did I miss? My code is below.</p>
  <p><strong>Livedemo: <a href="https://stackblitz.com/edit/react-ts-cun89d?file=App.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ts-cun89d?file=App.js</a></strong></p>
  <blockquote>
  <p>DAMAGE_SIZE_STATUSES = {
  GREEN: 'green',
  YELLOW: 'yellow',
  RED: 'red',
  };</p>
  </blockquote>
  <p>'index.js'</p>
  <pre><code>...
  
    const criticality =
      // eslint-disable-next-line no-nested-ternary
      critical &amp;&amp; criticalConditions.some((condition) =&gt; condition.fulfilled)
        ? DAMAGE_SIZE_STATUSES.RED
        : critical
        ? DAMAGE_SIZE_STATUSES.YELLOW
        : DAMAGE_SIZE_STATUSES.GREEN;
  
    const criticalityTextKey = getIndicatorStatusTextKey(criticality);
    const criticalityIcon = getIndicatorStatusIcon(criticality);
  
  return
  &lt;div className={classNames('DamageSizeIndicator', criticality)}&gt;
        &lt;div className=&quot;content&quot;&gt;
          &lt;div className=&quot;title&quot;&gt;
            &lt;div className=&quot;criticality&quot;&gt;
              {criticalityIcon &amp;&amp; &lt;Icon type={criticalityIcon} theme=&quot;filled&quot; /&gt;}
              {t(criticalityTextKey)}
            &lt;/div&gt;
            &lt;div className=&quot;condition&quot; /&gt;
          &lt;/div&gt;
          {critical ? (
            &lt;ul className=&quot;critical-icds&quot;&gt;
              {criticalConditions.map((icd) =&gt; (
                &lt;li
                  key={`critical-icd_${icd.code}`}
                  className={classNames({
                    'icd-fulfilled': icd.fulfilled,
                    'icd-unfulfilled': !icd.fulfilled,
                  })}
                &gt;
                  &lt;div className=&quot;icd-description&quot;&gt;
                    &lt;span&gt;ICD {icd.code}&lt;/span&gt;
                    &lt;Tooltip title={icd.description}&gt;{icd.description}&lt;/Tooltip&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;icd-condition&quot;&gt;
                    &lt;span&gt;
                      &lt;Icon
                        type={
                          icd.fulfilled ? 'check-circle' : 'exclamation-circle'
                        }
                      /&gt;
                      {t(getConditionFulfilledTextKey(icd.fulfilled))}
                    &lt;/span&gt;
                    {icd.condition}
                  &lt;/div&gt;
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          ) : null}
  
  
  </code></pre>
  <p>styling.scss</p>
  <pre><code>@import 'src/app/variables.scss';
  
  .DamageSizeIndicator {
    display: flex;
    flex-direction: column;
    height: 72px;
    justify-content: flex-start;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 450;
    white-space: nowrap;
    margin-left: 25px;
  
    position: relative;
    z-index: 2;
  
    .content {
      display: flex;
      flex-direction: column;
      box-shadow: $overlay-shadow;
      border-radius: $overlay-radius;
      position: absolute;
  
      .title,
      .critical-icds {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex: 1;
  
        border-radius: $overlay-radius;
        padding: 10px;
  
        transition: 0.2s linear all;
  
        i {
          margin-right: 0.5em;
        }
      }
  
      .title {
        background: $colorSubtleWhite;
        font-size: $titleFontSize;
  
        .condition {
          display: none;
          white-space: nowrap;
  
          padding-left: 0.5em;
        }
      }
  
      .critical-icds {
        background: $colorSubtleGray;
        font-size: $subTitleFontSize;
  
        display: none;
        list-style: none;
        margin: 0;
  
        flex-direction: column;
  
        li {
          width: 100%;
          margin: 0;
  
          display: flex;
          flex-direction: column;
  
          span {
            color: $colorGray;
            white-space: nowrap;
            padding-right: 0.5em;
          }
  
          .icd-description,
          .icd-condition {
            color: $colorLightBlack;
            position: relative;
  
            max-width: 350px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
  
          &amp;.icd-unfulfilled {
            .icd-condition span {
              color: $colorIndicatorYellow;
            }
          }
  
          &amp;.icd-fulfilled {
            .icd-condition span {
              color: $colorIndicatorGreen;
            }
          }
        }
      }
    }
  
    &amp;:hover {
      /* cursor: pointer; */
  
      .content {
        .title {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
  
          .condition {
            display: block;
          }
        }
  
        .critical-icds {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
  
          display: flex;
          line-height: inherit;
  
          li:not(:last-child) {
            margin-bottom: 1rem;
          }
        }
      }
    }
  
    &amp;.green {
      .content {
        box-shadow: none;
  
        .title .criticality {
          color: $colorIndicatorGray;
        }
      }
  
      pointer-events: none;
    }
  
    &amp;.yellow {
      .content .title .criticality {
        color: $colorIndicatorYellow;
      }
    }
  
    &amp;.red {
      .content .title .criticality {
        color: $colorIndicatorRed;
      }
    }
  }
  
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UBgUG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UBgUG.png" alt="one" /></a>
  <a href="https://i.stack.imgur.com/LIxLS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LIxLS.png" alt="two" /></a>
  <a href="https://i.stack.imgur.com/LhkRF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LhkRF.png" alt="three" /></a></p>