fix radio button positioning in webkit (#1157)

There is some weird interaction between the `text-align: center` on the parent `fieldset` element and the `position: absolute` of the child `input` element in Webkit. This could be a potential Webkit bug and I have tried to narrow down to a very specific scenario, as shown in this [jsfiddle](https://jsfiddle.net/q4L01uh9/7/). In the jsfiddle demo, it seems that the bug appears when the parent block element with `text-align: center` has both child block elements and child inline elements. In this scenario, the child inline elements with `position: absolute` would not be centered correctly. This fix bypass this potential bug by wrapping `<label>` and `<input>` in a div, because in this case the `position: absolute` of the `<input>` would be relative to the wrapping `<div>` instead of to the `<fieldset>`. Tested on WebkitGTK, Chrome and Firefox and it all works. Haven't tried Edge yet but I don't expect it to be any different from Chrome because it it based on Chromium. Possible related bug report for webkit: https://bugs.webkit.org/show_bug.cgi?id=31241

Author: adlius

lib/registries/addon/branded/new/styles.scss

@@ -97,6 +97,10 @@
  text-transform: uppercase;
 }
 
+.RadioButtonAndLabelDiv {
+ display: inline;
+}
+
 .IsChecked {
  color: $color-osf-secondary;
  background-color: $color-bg-gray-blue-light;

lib/registries/addon/branded/new/template.hbs

@@ -28,36 +28,40 @@
  <legend local-class='RadioLegend'>
  {{t 'registries.new.step_one_project_heading'}}
  </legend>
- <input
- data-test-has-project-button
- local-class='RadioElement RadioInput'
- type='radio'
- name='HasProject'
- value='yes'
- onclick={{fn (mut this.isBasedOnProject) true}}
- checked={{this.isBasedOnProject}}
- >
- <label
- local-class='RadioElement RadioLabel {{if this.isBasedOnProject 'IsChecked'}}'
- for='HasProject'
- >
- {{t 'registries.new.yes'}}
- </label>
- <input
- data-test-no-project-button
- local-class='RadioElement RadioInput'
- type='radio'
- name='no-project'
- value='no'
- onclick={{fn (mut this.isBasedOnProject) false}}
- checked={{not this.isBasedOnProject}}
- >
- <label
- local-class='RadioElement RadioLabel {{unless this.isBasedOnProject 'IsChecked'}}'
- for='NoProject'
- >
- {{t 'registries.new.no'}}
- </label>
+ <div local-class='RadioButtonAndLabelDiv'>
+ <input
+ data-test-has-project-button
+ local-class='RadioElement RadioInput'
+ type='radio'
+ name='HasProject'
+ value='yes'
+ onclick={{fn (mut this.isBasedOnProject) true}}
+ checked={{this.isBasedOnProject}}
+ >
+ <label
+ local-class='RadioElement RadioLabel {{if this.isBasedOnProject 'IsChecked'}}'
+ for='HasProject'
+ >
+ {{t 'registries.new.yes'}}
+ </label>
+ </div>
+ <div local-class='RadioButtonAndLabelDiv'>
+ <input
+ data-test-no-project-button
+ local-class='RadioElement RadioInput'
+ type='radio'
+ name='no-project'
+ value='no'
+ onclick={{fn (mut this.isBasedOnProject) false}}
+ checked={{not this.isBasedOnProject}}
+ >
+ <label
+ local-class='RadioElement RadioLabel {{unless this.isBasedOnProject 'IsChecked'}}'
+ for='NoProject'
+ >
+ {{t 'registries.new.no'}}
+ </label>
+ </div>
  </fieldset>
  </label>
  {{#if this.isBasedOnProject}}