Make 3 column layour responsive if browser is narrow (#1741)

files/app/partial/status.ut

@@ -42,7 +42,8 @@
         {{_R("location")}}
     </div>
 </div>
-<div id="c2">
+<div id="c2c3">
+    <div id="c2">
         <div hx-get="u-messages" hx-trigger="every 300s [document.visibilityState === 'visible']">
         {% if (messages.haveMessages() || (auth.isAdmin && messages.haveToDos())) { %}
             <div id="messages">
@@ -63,8 +64,8 @@
             </div>
         </div>
         {{_R("activator", { id: "local-and-neighbor-devices", activate: [ ".noctrl:first-child",  ".noctrl:nth-child(2)" ] })}}
-</div>
-<div id="c3">
+    </div>
+    <div id="c3">
         <div id="radio-and-antenna">
             {{_R("radio-and-antenna")}}
         </div>
@@ -94,6 +95,7 @@
             </div>
         </div>
         {% } %}
+    </div>
 </div>
 {% } else { %}
 <div id="general">

files/app/resource/css/user.css

@@ -167,7 +167,6 @@ body.authenticated .ctrl:hover
     display: flex;
     flex-direction: column;
     min-width: 330px;
-    width: 330px;
 }
 #general
 {
@@ -175,8 +174,9 @@ body.authenticated .ctrl:hover
     flex-direction: column;
     padding: 10px 5px;
 }
-#location
+#c2c3
 {
+    display: flex;
 }
 #c2
 {
@@ -204,14 +204,29 @@ body.authenticated .ctrl:hover
     padding: 20px 0 0 5px;
     container-type: inline-size;
 }
+@media (max-width: 1200px)
+{
+    #c2c3
+    {
+        flex-direction: column;
+    }
+    #c3
+    {
+        padding-left: 15px;
+    }
+}
+@media (max-width: 800px)
+{
+    #main-container
+    {
+        flex-direction: column;
+    }
+}
 #radio-and-antenna
 {
     display: flex;
     flex-direction: column;
 }
-#mesh-summary
-{
-}
 #tunnels
 {
     display: flex;