Input Select: Bricht nicht um bei längerem Text

Beschreibung

Aktuell wird der Text in der Select-Komponente mit Ellipsis (…) abgekürzt, wenn er zu lang ist. Das führt dazu, dass wichtige Informationen abgeschnitten werden. Stattdessen soll der Text bei Bedarf umbrechen und vollständig mehrzeilig angezeigt werden.

image

Akzeptanzkriterien

  • Langer Text wird nicht mit Ellipsis abgekürzt.
  • Der Text darf mehrzeilig umbrechen, sodass er vollständig lesbar ist.
  • Die Höhe der Select-Optionen passt sich entsprechend an.

Lösungsvorschlag

//white space ergänzen
.kern-form-input__select {
	white-space: break-spaces;
}

//height auf min-height ändern
.kern-form-input__select-wrapper {
        //height: var(--kern-metric-dimension-x-large, 48px);
        min-height: var(--kern-metric-dimension-x-large, 48px);
}

Bei dem Lösungsvorschlag überlappt das ::after Icon trotzdem noch, weil es auf position: absolute gesetzt ist. Wäre hier vielleicht eine flexbox besser?