Webform radios -> display issues

I'm not able to replicate this issue on mac OSX in chrome or safari with 9.3.x at any zoom level.

Can you try using the latest development branch and see if the problem still occurs?

Haven't tested it out, but I wonder what styles are applying if display inline is not set.

I do agree that we could use some vertical padding to allow space for the offset outline.

Hm, not sure what to think about this one. On the one hand, modules like Webform should make sure they work with Olivero, at least once it becomes the core theme. On the other, though, the screenshot where the radio button disappears is really bad; that would be a major bug.

@KarinG Does this happen in Bartik?

Splitting the difference at "Normal" for now.

This is defined in the webform css in webform.element.options.css

/**
 * Display columns for devices that are more than 400px wide.
 */
@media (min-width: 400px) {
  .webform-options-display-two-columns {
    display: block;
    max-width: 900px;
    margin-top: 0.4em;
    column-count: 2;
  }

  .webform-options-display-three-columns {
    display: block;
    max-width: 900px;
    margin-top: 0.4em;
    column-count: 3;
  }

  .webform-options-display-two-columns div.form-item,
  .webform-options-display-three-columns div.form-item {
    margin-top: 0;
    margin-bottom: 0;
  }
}

In particular

  .webform-options-display-two-columns div.form-item,
  .webform-options-display-three-columns div.form-item {
    margin-top: 0;
    margin-bottom: 0;
  }

However, this is mainly becoming a problem because of the additional styling around radios that we have in Olivero.

I'm also seeing the focus state with a cropped border radius (on radios other than the first child), some padding top and bottom might solve both problems.

Something like the attached which seems to solve this particular use case.

It does feel a bit weird to be using webform specific classes (and breakpoint!) in Olivero however

Edit: its worth noting I cannot recreate all the issues from the original post (such as parts of the radio button appearing in the wrong column)

@aaron.ferris i think it's wrong idea to write styles for webform's based selectors inside of Olivero, because webform module is a contrib module. Olivero theme can't and shouldn't fit all contrib modules. Here is reversed logic -> contrib modules should make sure they work fine with Olivero.

But still, maybe somehow possible to fix described issue from Olivero theme without references to webform module, i dont know.

My initial thoughts are the following:
1. If described problem happens really often to several contrib modules / cases not related to drupal core -> maybe then we can write a little bit more styles inside of Olivero to fit all those. A little bit more styles means additional styles, which will overlap module's styles so we will never meet described problem, because it can be universally fixed from Olivero theme.
2. If problem happens only to Webform module and nowhere else -> for sure better check webform module and provide fix from there, instead of touching Olivero.

I don't think it's possible to avoid the webform specific classes, the issue arrives when radios are stacked into webform columns (possibly any column?). I believe radios by default are stacked into rows, at least from my limited testing anyway.

Agreed however it feels weird for webform references in Olivero, I indicated as such in my comment.

Hello, @kostyashupenko.
You are correct. The gap between two radio buttons works great with a single column, however when we set two, three, or five columns, the spacing is removed by webform CSS.
We can get our layout space and active radio button will not overlap by eliminating margin-bottom css.
So we should edit webform CSS rather than the olivero theme file.
Please see the following screenshot for reference.

@all
Please suggest me how can I submit the patch of webform contrib module. ?