### Preflight Checklist

- [X] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [X] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a bug report that matches the one I want to file, without success.

### Electron Version

19, 20

### What operating system are you using?

macOS

### Operating System Version

Monterey 12.4

### What arch are you using?

x64

### Last Known Working Electron version

19.0.0-alpha.3

### Expected Behavior

Datalist is rendered below associated input, and words are not cut off

### Actual Behavior

From Electron 19.0.0-alpha.4 on, the words are cut off at the bottom. This issue isnt present in 19.0.0-alpha.3, though the datalist overlay is still rendered in the wrong place (it seems due to it being rendered based on the offset from the webFrame, but placed on top of the webContents.)

<img width="806" alt="Screenshot 2022-06-27 at 13 17 10" src="https://user-images.githubusercontent.com/41970/175929574-0a19832d-90e4-476b-8ab4-584e121015fc.png">

### Testcase Gist URL

https://gist.github.com/1525a4d39d33bc46eb033af6ebcf51c1

### Additional Information

The Gist loads a codepen with a datalist ( https://codepen.io/leorapirap/pen/ZBrBMx ) If you open that in chrome regular, or electron 18, the datalist dropdown looks good.
shell/browser/ui/views/autofill_popup_view.cc
int index,
                                          const gfx::Rect& entry_rect) {
  if (!popup_)
    return;
  canvas->FillRect(entry_rect, GetColorProvider()->GetColor(
                                   popup_->GetBackgroundColorIDForRow(index)));
  const bool is_rtl = base::i18n::IsRTL();
  const int text_align =
      is_rtl ? gfx::Canvas::TEXT_ALIGN_RIGHT : gfx::Canvas::TEXT_ALIGN_LEFT;
  gfx::Rect value_rect = entry_rect;
  value_rect.Inset(gfx::Insets::VH(kEndPadding, 0));
  int x_align_left = value_rect.x();
  const int value_width = gfx::GetStringWidth(
      popup_->GetValueAt(index), popup_->GetValueFontListForRow(index));
  int value_x_align_left = x_align_left;
  value_x_align_left =
      is_rtl ? value_rect.right() - value_width : value_rect.x();
  canvas->DrawStringRectWithFlags(
      popup_->GetValueAt(index), popup_->GetValueFontListForRow(index),
      GetColorProvider()->GetColor(ui::kColorResultsTableNormalText),
      gfx::Rect(value_x_align_left, value_rect.y(), value_width,
                value_rect.height()),
      text_align);
  
  if (!popup_->GetLabelAt(index).empty()) {
    const int label_width = gfx::GetStringWidth(
        popup_->GetLabelAt(index), popup_->GetLabelFontListForRow(index));
    int label_x_align_left = x_align_left;
    label_x_align_left =
        is_rtl ? value_rect.x() : value_rect.right() - label_width;