bug: ux - github branch selector - long branch names are truncated with no way to read it

[tresorama]

Current

If a branch name is long, the selector doesn't expand, and the user cannot understand which branch is.

Potential Solutions

1. Make the popever wider. But the problem can be still present if the text is wider then the new width
2. Make the item (of the selector) horizontally scrollable
3. Do not truncate text when excede the width of the item, but wrap to multiple lines

I think best would be a combination of 1 and 3:

• wider popover, with multiline support

[tresorama]

Temp Fix
Not tested on mobile, only desktop.

// component - select branch popover 
.kui\:reset[role=presentation][data-placement=bottom]:has(> span):has(> [role=listbox][aria-label="Suggestions"]) {
  & [role=option] {
    display: flex;

    > * {
      flex: 1;
    }

    .list-item-text > span {
      display: block;
    }
  }
}