Improve the display of the list of the quickstarts - QuarkusQuickstartPicker.tsx

[cmoulliard]

Issue

Improve the display of the list of the quickstarts using the QuarkusQuickstartPicker.tsx as currently longer quickstart names are truncated

Better option could be to use a ComboBox: https://mui.com/material-ui/react-autocomplete/#combo-box

[cmoulliard]

Is there a reason why we use ?

    <FormControl
      margin="normal"
      required={required}
      error={rawErrors && rawErrors?.length > 0 && !formData}>
      <div>
          <div {...getRootProps()}>
            <label className={classes.label} {...getInputLabelProps()}>
              Quarkus Quickstart
            </label>
            <input className={classes.input} {...getInputProps()} />
          </div>
          {groupedOptions.length > 0 ? (
            <ul className={classes.listbox} {...getListboxProps()}>
              {groupedOptions.map((option, index) => (
                <li {...getOptionProps({ option, index })}>{option}</li>
              ))}
            </ul>
          ) : null}
      </div>
    </FormControl>

and not Select

<FormControl
        margin="normal"
        required
        error={rawErrors?.length > 0 && !organization}
      >
        {allowedOrganizations?.length ? (
          <Select
            native
            label="Organization"
            onChange={s =>
              onChange({ organization: String(Array.isArray(s) ? s[0] : s) })
            }
            disabled={allowedOrganizations.length === 1}
            selected={organization}
            items={organizationItems}
          />
        ) : (
          <>
            <InputLabel htmlFor="orgInput">Organization</InputLabel>
            <Input
              id="orgInput"
              onChange={e => onChange({ organization: e.target.value })}
              value={organization}
            />
          </>
        )}
        <FormHelperText>
          The Organization that this repo will belong to
        </FormHelperText>
      </FormControl>

@iocanel

[cmoulliard]

CSS change I did looks like this. WDYT ? @iocanel

[iocanel]

@cmoulliard: I like it!

[cmoulliard]

Last proposition