Fix styling for width < 1100px

manage/manage.css

@@ -855,11 +855,42 @@ details.applies-to-extra[open] {
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1100px) {
+  body,
+  #main-header,
+  #tools-wrapper,
+  .manage-row {
+    position: static;
+    display: block;
+    height: auto;
+  }
+  #installed .entry-header {
+    position: static;
+    width: 100%;
+    height: auto;
+  }
+  #manage-backups {
+    display: inline-block;
+    vertical-align: center;
+  }
+  #manage-backups:hover .dropdown {
+    display: block;
+    left: -20px;
+    right: auto;
+    top: 99%;
+  }
+  #installed,
+  #tools-wrapper:not(.hidden) + #installed {
+    margin-top: 0;
+  }
   #installed .entry,
   #installed .entry-col,
   #installed .entry-header {
-    display: block;
+    flex-wrap: wrap;
+  }
+  .header-name,
+  .entry-name {
+    flex: 1;
   }
   .entry-actions {
     white-space: normal;

manage/tooltips.css

@@ -162,3 +162,25 @@
 .update-problem .check-update:before {
   border-right-color: var(--tooltip-error);
 }
+
+@media (max-width: 1100px) {
+  /* Action icons flip to left side; switch tooltip direction */
+  #main-actions [data-title].tt-w:after {
+    bottom: 50%;
+    left: 100%;
+    right: auto;
+    margin-left: 6px;
+    margin-right: 0;
+    transform: translateY(50%)
+  }
+
+  #main-actions [data-title].tt-w:before {
+    border-left-color: transparent;
+    border-right-color: var(--tooltip-bkgd);
+    bottom: 50%;
+    margin-top: -6px;
+    left: auto;
+    right: -7px;
+    top: 50%
+  }
+}