Fix layout issue with cloud storage widget

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1217

src/cloud-ui.html

@@ -14,7 +14,7 @@
     </div>
     <div id="cloudCog" class="fa-icon">cog</div>
     <div id="cloudOptions">
-        <label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
+        <label data-i18n="cloudDeviceNamePrompt">_<input id="cloudDeviceName" type="text" value=""></label>&nbsp;<button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
     </div>
 </div>
 <div id="cloudError"></div>

src/css/cloud-ui.css

@@ -1,7 +1,7 @@
 #cloudWidget {
     background: url("../img/cloud.png") hsl(216, 100%, 93%);
     margin: 0.5em 0;
-    overflow: auto;
+    min-width: max-content;
     position: relative;
     }
 #cloudWidget.hide {
@@ -81,19 +81,25 @@
     fill: inherit;
     }
 #cloudWidget #cloudOptions {
+    align-items: center;
     background-color: var(--default-surface);
     border: 1px solid var(--bg-1-border);
+    bottom: 2px;
     display: none;
+    font-size: small;
     padding: 0.5em;
     position: absolute;
-    right: 0;
+    right: 2px;
     text-align: center;
+    top: 2px;
     z-index: 10;
     }
+#cloudWidget #cloudOptions label {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    }
 #cloudWidget #cloudOptions.show {
-    display: block;
+    display: flex;
     white-space: nowrap;
     }
-#cloudOptions button {
-    min-height: var(--default-gap-xlarge);
-    }

src/js/i18n.js

@@ -101,7 +101,21 @@ const safeTextToDOM = function(text, parent) {
 
     // Fast path (most common).
     if ( text.indexOf('<') === -1 ) {
-        parent.appendChild(safeTextToTextNode(text));
+        const toInsert = safeTextToTextNode(text);
+        let toReplace = parent.childElementCount !== 0
+            ? parent.firstChild
+            : null;
+        while ( toReplace !== null ) {
+            if ( toReplace.nodeType === 3 && toReplace.nodeValue === '_' ) {
+                break;
+            }
+            toReplace = toReplace.nextSibling;
+        }
+        if ( toReplace !== null ) {
+            parent.replaceChild(toInsert, toReplace);
+        } else {
+            parent.appendChild(toInsert);
+        }
         return;
     }
     // Slow path.