Multi-select dropdown option rows: only checkbox/label text is clickable, not the full row

[dearsimanovich-epam]

Description

In DialSelect/DialSelectField with multiple, each option row in the open dropdown list is only clickable where the checkbox + label text render — clicking the empty space to the right of the text (but still inside the option row's visible bounds/highlight) does nothing.

Root cause (traced in the compiled bundle, v0.12.0)

Each multi-select option renders as:

<div role="option" className="... w-full ...">   {/* full-width row, no onClick */}
  <Checkbox
    label={<span className="flex w-full flex-1 pl-2 min-w-0 items-center gap-2 text-primary">...</span>}
    checked={...}
    onChange={() => !option.disabled && onSelect(option.value)}
  />
</div>

Checkbox renders the passed label inside its own <label> wrapper:

const Checkbox = ({ label, id, checked, ... }) => (
  <label className="flex flex-row items-center cursor-pointer text-accent-primary small-medium min-w-0" htmlFor={id}>
    {/* checkbox icon */}
    {label}
    <input type="checkbox" ... className="invisible size-0" />
  </label>
);

The outer <label>'s own classes are flex flex-row items-center cursor-pointer ... min-w-0 — no w-full/flex-1. So it only sizes to fit its content (checkbox icon + text). The label prop passed in is styled w-full flex-1, but that has no effect since its parent (the <label> element itself) isn't stretched to fill the option row.

Net effect: the surrounding <div role="option"> is full width but has no click handler; the actual clickable <label> is only as wide as the checkbox + text. Any click in the row's remaining empty space does nothing.

Steps to reproduce

1. Render <DialSelectField multiple options={...} .../> (or DialSelect multiple) with a container wider than the widest option label.
2. Open the dropdown.
3. Click in the empty area of an option row, to the right of its checkbox/text, but still within the row's height/background.

Expected: the option toggles (matches how the single-select trigger box already behaves — full row clickable).
Actual: nothing happens; only clicking directly on the checkbox or label text toggles the option.

Suggested fix

Give the multi-select option <Checkbox>'s wrapping <label> w-full (or flex-1 w-full), or move an onClick handler onto the surrounding role="option" div instead of relying solely on the inner <label>/<input>.

Environment

• @epam/ai-dial-ui-kit 0.12.0
• Found while building the Analytics Tables "Ordering key" multi-select field in ai-dial-admin-frontend.