fix: person-item text styles and custom item presentation select width (#5426)

Author: jouni

frontend/demo/component/select/react/select-presentation.tsx

@@ -21,7 +21,7 @@ function Example() {
 
   return (
     // tag::snippet[]
-    <Select label="Choose doctor">
+    <Select label="Choose doctor" style={{ width: '15em' }}>
       <ListBox>
         {people.value.map((person) => (
           <Item value={String(person.id)} key={person.id}>

frontend/demo/component/select/select-presentation.ts

@@ -30,6 +30,7 @@ export class Example extends LitElement {
       <!-- tag::snippet[] -->
       <vaadin-select
         label="Choose doctor"
+        style="width: 15em;"
         ${selectRenderer(this.renderer, this.people)}
       ></vaadin-select>
       <!-- end::snippet[] -->

frontend/themes/docs/person-item.css

@@ -7,7 +7,7 @@
         "avatar title";
     gap: 0 var(--vaadin-gap-s);
     align-items: center;
-    line-height: 1;
+    line-height: 1.2;
 
     & > :is(vaadin-avatar, img) {
         grid-area: avatar;
@@ -20,6 +20,7 @@
     & > span:last-of-type {
         grid-area: title;
         font-size: 0.875rem;
+        font-weight: 400;
         color: var(--vaadin-text-color-secondary);
     }
 }

src/main/java/com/vaadin/demo/component/select/SelectPresentation.java

@@ -20,6 +20,7 @@ public class SelectPresentation extends Div {
     public SelectPresentation() {
         // tag::snippet[]
         Select<Person> select = new Select<>();
+        select.setWidth("15em");
         select.setLabel("Choose doctor");
         select.setRenderer(new ComponentRenderer<>(person -> {
             Avatar avatar = new Avatar(person.getFullName(),