prevent word break between "on this network" and "and by paired devices" and fix circle center offset

public/index.html

@@ -86,7 +86,10 @@
             <use xlink:href="#wifi-tethering" />
         </svg>
         <div id="displayName" placeholder="&nbsp;"></div>
-        <div class="font-body2">You can be discovered by everyone <span id="on-this-network">on this network</span><span id="and-by-paired-devices" hidden> and by <span id="paired-devices">paired devices</span></span></div>
+        <div class="font-body2">
+            You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
+            <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
+        </div>
     </footer>
     <!-- Pair Device Dialog -->
     <x-dialog id="pairDeviceDialog">

public/scripts/ui.js

@@ -1569,15 +1569,20 @@ Events.on('load', () => {
     style.top = 0;
     style.left = 0;
     let ctx = c.getContext('2d');
-    let x0, y0, w, h, dw;
+    let x0, y0, w, h, dw, offset;
 
     function init() {
         w = window.innerWidth;
         h = window.innerHeight;
         c.width = w;
         c.height = h;
-        let offset = h > 380 ? 100 : 65;
-        offset = h > 800 ? 116 : offset;
+        offset = h > 800
+            ? 116
+            : h > 380
+                ? 100
+                : 65;
+
+        if (w < 420) offset += 20;
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.max(w, h, 1000) / 13;

public/styles.css

@@ -381,6 +381,7 @@ footer .logo {
 footer .font-body2 {
     color: var(--primary-color);
     text-underline-position: under;
+    margin: auto 18px;
 }
 
 #on-this-network {