warning message formatting so its same as Dashboard

interface/src/app/main/Devices.tsx

@@ -533,19 +533,17 @@ const Devices = memo(() => {
 
   const renderCoreData = () => (
     <>
-      <Box justifyContent="center" flexDirection="column">
+      {!coreData.connected ? (
-        <IconContext.Provider
+        <MessageBox level="error" message={LL.EMS_BUS_WARNING()} />
-          value={{
+      ) : (
-            color: 'lightblue',
+        <Box justifyContent="center" flexDirection="column">
-            size: '18',
+          <IconContext.Provider
-            style: { verticalAlign: 'middle' }
+            value={{
-          }}
+              color: 'lightblue',
-        >
+              size: '18',
-          {!coreData.connected && (
+              style: { verticalAlign: 'middle' }
-            <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
+            }}
-          )}
+          >
-
-          {coreData.connected && (
             <Table
               data={{ nodes: [...coreData.devices] }}
               select={device_select}
@@ -581,9 +579,9 @@ const Devices = memo(() => {
                 </>
               )}
             </Table>
-          )}
+          </IconContext.Provider>
-        </IconContext.Provider>
+        </Box>
-      </Box>
+      )}
     </>
   );