From 81d36774b5b7608aef15b44db751fd24820046aa Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 8 Feb 2023 05:14:34 +0100
Subject: [PATCH] prevent word break between "on this network" and "and by
 paired devices" and fix circle center offset

---
 public/index.html    |  5 ++++-
 public/scripts/ui.js | 11 ++++++++---
 public/styles.css    |  1 +
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 32a6592..c3190f6 100644
--- a/public/index.html
+++ b/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">
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 9a0f0b9..75b1b77 100644
--- a/public/scripts/ui.js
+++ b/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;
diff --git a/public/styles.css b/public/styles.css
index 98b0cdf..a85806b 100644
--- a/public/styles.css
+++ b/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 {