gui: Optimize folder/device info for small screens (fixes #5774) (#5787)

break table layout and add button margin on small screens

gui/default/assets/css/overrides.css

@@ -372,3 +372,32 @@ ul.three-columns li, ul.two-columns li {
 .fancytree-ext-table {
     width: 100% !important;
 }
+
+@media (max-width: 419px) {
+    /* the selectors are build to target only the content of folder and device
+       panels as it would "destroy" e.g. out of sync or recent changes listings */
+    div[id^='device-'].panel-collapse table,
+    div[id^='folder-'].panel-collapse table,
+    div[id^='device-'].panel-collapse tbody,
+    div[id^='folder-'].panel-collapse tbody,
+    div[id^='device-'].panel-collapse tr,
+    div[id^='folder-'].panel-collapse tr {
+        display: block;
+    }
+    div[id^='device-'].panel-collapse th,
+    div[id^='folder-'].panel-collapse th,
+    div[id^='device-'].panel-collapse td,
+    div[id^='folder-'].panel-collapse td {
+        display: block;
+        max-width: 100%;
+        width: 100%;
+    }
+    
+    /* all buttons, except panel headings, get bottom margin, as they won't fit
+       beside each other anymore */
+    .btn:not(.panel-heading),
+    /* this "+"-selector is needed to override some bootstrap defaults */
+    .btn:not(.panel-heading) + .btn:not(.panel-heading) {
+        margin-bottom: 1rem;
+    }
+}