client/css: align radioboxes to first line

client/css/core-forms.styl

@@ -65,10 +65,9 @@ input[type=radio], input[type=checkbox]
 .radio:before, .checkbox:before
     transition: border-color 0.1s linear
     position: absolute
-    top: 50%
     left: 0
+    top: 0.15em
     display: block
-    margin-top: -10px
     width: 16px
     height: 16px
     background: $input-enabled-background-color
@@ -79,10 +78,10 @@ input[type=radio], input[type=checkbox]
     background: $main-color
     transition: opacity 0.1s linear
     position: absolute
-    top: 50%
     left: 5px
+    top: 0.15em
+    margin-top: 5px
     display: block
-    margin-top: -5px
     width: 10px
     height: 10px
     border-radius: 50%
@@ -92,10 +91,10 @@ input[type=radio], input[type=checkbox]
 .checkbox:after
     transition: opacity 0.1s linear
     position: absolute
-    top: 50%
+    top: 0.15em
     left: 6px
     display: block
-    margin-top: -7px
+    margin-top: 3px
     width: 5px
     height: 9px
     border-right: 3px solid $main-color

client/css/post-upload.styl

@@ -39,20 +39,24 @@ $cancel-button-color = tomato
         margin-top: 1em
 
     .uploadables-container
-        line-height: 200%
-
         li
             margin: 0 0 1.2em 0
 
         .uploadable
             .file
+                margin: 0.3em 0
                 overflow: hidden
                 white-space: nowrap
                 text-align: left
                 text-overflow: ellipsis
 
+            .anonymous
+                margin: 0.3em 0
+
             .safety
+                margin: 0.3em 0
                 label
+                    display: inline-block
                     margin-right: 1em
 
             .thumbnail-wrapper

client/css/post-view.styl

@@ -120,11 +120,12 @@
             margin-bottom: 1em
 
     .safety
+        &>label
+            width: 100%
+        .radio-wrapper
             display: flex
             flex-wrap: wrap
-        label:not(.radio)
+        .radio-wrapper label
-            width: 100%
-        .radio
             flex-grow: 1
             display: inline-block
 

client/html/post_edit_sidebar.tpl

@@ -7,6 +7,7 @@
         <% if (ctx.canEditPostSafety) { %>
             <section class='safety'>
                 <label>Safety</label>
+                <div class='radio-wrapper'>
                     <%= ctx.makeRadio({
                         name: 'safety',
                         class: 'safety-safe',
@@ -25,6 +26,7 @@
                         selectedValue: ctx.post.safety,
                         class: 'safety-unsafe',
                         text: 'Unsafe'}) %>
+                </div>
             </section>
         <% } %>
 

client/js/util/views.js

@@ -53,7 +53,10 @@ function makeThumbnail(url) {
 
 function makeRadio(options) {
     _imbueId(options);
-    return makeVoidElement(
+    return makeNonVoidElement(
+        'label',
+        {for: options.id},
+        makeVoidElement(
             'input',
             {
                 id: options.id,
@@ -64,12 +67,15 @@ function makeRadio(options) {
                 disabled: options.readonly,
                 required: options.required,
             }) +
-    _makeLabel(options, {class: 'radio'});
+        makeNonVoidElement('span', {class: 'radio'}, options.text));
 }
 
 function makeCheckbox(options) {
     _imbueId(options);
-    return makeVoidElement(
+    return makeNonVoidElement(
+        'label',
+        {for: options.id},
+        makeVoidElement(
             'input',
             {
                 id: options.id,
@@ -81,7 +87,7 @@ function makeCheckbox(options) {
                 disabled: options.readonly,
                 required: options.required,
             }) +
-    _makeLabel(options, {class: 'checkbox'});
+        makeNonVoidElement('span', {class: 'checkbox'}, options.text));
 }
 
 function makeSelect(options) {