Info bar style fix

src/pages/authenticated/authenticated.css

@@ -104,7 +104,7 @@
 }
 
 .message {
-    margin-top: 1.4rem;
+    margin-top: 1.3rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -138,15 +138,19 @@
 }
 
 .info-bar {
-    margin-top: 0.5rem;
+    margin-top: 0.8rem;
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: 0.75rem;
+    font-size: 0.65rem;
     font-weight: 600;
     text-transform: uppercase;
 }
 
+.info-bar div {
+    text-align: center;
+}
+
 .info-bar span:first-child {
     font-weight: 900;
 }
@@ -156,7 +160,7 @@
 }
 
 .menu-bar {
-    margin-top: 2rem;
+    margin-top: 1.4rem;
     display: flex;
     justify-content: space-evenly;
 }

src/pages/authenticated/authenticated.tsx

@@ -112,11 +112,11 @@ function Page({ authContext, deviceContext, data, causeError }) {
 
         <div className='info-bar'>
             <div>
-                <span>{RESX.auth.info.device}</span>
+                <span>{RESX.auth.info.device}</span><br/>
                 <span>{deviceContext.device.deviceId}</span>
             </div>
             <div>
-                <span>{RESX.auth.info.host}</span>
+                <span>{RESX.auth.info.host}</span><br/>
                 <span>{authContext.applicationHost}</span>
             </div>
         </div>