Move hostname label to top

Related feedback:
- https://twitter.com/gorhill/status/1650912124003139599

src/css/popup-fenix.css

@@ -64,6 +64,7 @@ hr {
     align-items: stretch;
     display: flex;
     justify-content: space-between;
+    margin: var(--popup-gap-extra-thin) 0;
     }
 #switch {
     color: var(--popup-power-ink);
@@ -73,7 +74,7 @@ hr {
     flex-grow: 1;
     font-size: 96px;
     justify-content: center;
-    margin: var(--popup-gap-thin) var(--popup-gap-thin) 0;
+    margin: var(--popup-gap) 0;
     padding: 0;
     stroke: none;
     stroke-width: 64;
@@ -113,8 +114,12 @@ body.needSave #revertRules {
     visibility: visible;
     }
 #hostname {
-    margin: var(--popup-gap) var(--popup-gap-extra-thin);
+    background-color: var(--popup-toolbar-surface);
+    margin: 0;
+    padding: var(--popup-gap-thin) 0;
     text-align: center;
+    white-space: normal;
+
     }
 #hostname > span {
     word-break: break-all;

src/popup-fenix.html

@@ -16,6 +16,7 @@
 <div id="panes">
     <div id="main">
         <div id="sticky">
+            <div id="hostname"><span></span>&shy;<span></span></div>
             <div id="stickyTools">
                 <div class="rulesetTools">
                     <span id="saveRules" class="fa-icon" data-i18n-title="popupTipSaveRules">lock</span>
@@ -40,7 +41,6 @@
                     <span id="refresh" class="fa-icon">refresh</span>
                 </div>
             </div>
-            <div id="hostname"><span></span>&shy;<span></span></div>
         </div>
         <div id="extraTools" class="toolRibbon" data-more="d">
             <span id="no-popups" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-popups<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoPopups_v2"></span></span>