Improve UI for pad creation screen

customize.dist/src/less2/include/creation.less

@@ -33,16 +33,26 @@
             flex-wrap: wrap;
             justify-content: center;
             align-items: center;
-            h2, p {
-                width: 100%;
-            }
             h2 {
+                width: 100%;
                 display: flex;
+                margin-bottom: 20px;
                 justify-content: space-between;
                 .cp-creation-help {
                     display: none;
                 }
             }
+            .cp-creation-help-container {
+                display: flex;
+                justify-content: space-between;
+                p {
+                    padding: 0 20px;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    flex-basis: 50%;
+                    text-align: justify;
+                }
+            }
             @media screen and (max-width: 500px) {
                 width: ~"calc(100% - 30px)";
             }
@@ -50,7 +60,7 @@
                 h2 .cp-creation-help {
                     display: inline;
                 }
-                p {
+                .cp-creation-help-container {
                     display: none;
                 }
             }

www/common/common-ui-elements.js

@@ -1687,7 +1687,10 @@ define([
                 Messages.creation_ownedTitle,
                 createHelper(Messages.creation_owned1 + '\n' + Messages.creation_owned2)
             ]),
-            setHTML(h('p'), Messages.creation_owned1 + '<br>' + Messages.creation_owned2),
+            h('div.cp-creation-help-container', [
+                setHTML(h('p'), Messages.creation_owned1),
+                setHTML(h('p'), Messages.creation_owned2)
+            ]),
             h('input#cp-creation-owned-true.cp-creation-owned-value', {
                 type: 'radio',
                 name: 'cp-creation-owned',
@@ -1715,7 +1718,10 @@ define([
                 Messages.creation_expireTitle,
                 createHelper(Messages.creation_expire1, Messages.creation_expire2)
             ]),
-            setHTML(h('p'), Messages.creation_expire1 + '<br>' + Messages.creation_expire2),
+            h('div.cp-creation-help-container', [
+                setHTML(h('p'), Messages.creation_expire1),
+                setHTML(h('p'), Messages.creation_expire2)
+            ]),
             h('input#cp-creation-expire-false.cp-creation-expire-value', {
                 type: 'radio',
                 name: 'cp-creation-expire',