Nel componente Callout se il titolo è inferiore a 10 caratteri, la linea dopo il titolo non chiude il box.

[andrea-conforto]

Versione di Bootstrap Italia

Il problema è stato riscontrato sulla versione 2.8.7 e su versioni precedenti

Comportamento atteso

Utilizzando il codice HTML:

<div class="callout">
  <div class="callout-inner">
    <div class="callout-title">
      <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-info-circle"></use></svg>
      <span class="visually-hidden">Confermato</span> 
      <span class="text">Titolo</span>
    </div>
    <p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
  </div>
</div>

Che contiene un titolo inferiore a 10 caratteri la linea subito dopo il titolo dovrebbe chiudere il box, invece resta spezzata. Il problema sembra evidenziarsi solo in presenza di un titolo inferiore a 10 caratteri.

Possibili soluzioni

Modificando la lina 238 del file /src/custom/_callout.scss da width: 250%; a width: calc(100% + 23rem); oppure a width: 1200%; il problema sembra rientrare.

[andrea-conforto]

#1121 versione anche per il Design React Kit