gui: Tweak the Restore Versions modal for better usability (#7972)

gui/default/assets/css/overrides.css

@@ -301,6 +301,62 @@ ul.three-columns li, ul.two-columns li {
     z-index: 980;
 }
 
+/*
+ * Restore Versions tweaks
+ */
+
+#restoreTree-container {
+    overflow-y: scroll;
+    resize: vertical;
+    /* Limit height to prevent vertical screen overflow. */
+    max-height: calc(100vh - 390px);
+    /* Always fit at least one folder with dropdown open. */
+    min-height: 136px;
+}
+@media (min-width: 768px) {
+    #restoreTree-container {
+        max-height: calc(100vh - 401px);
+    }
+}
+@media (min-width: 992px) {
+    #restoreTree-container {
+        max-height: calc(100vh - 333px);
+    }
+}
+
+/* Ignore fixed height when manually resized. */
+#restoreTree-container[style*="height"] {
+    max-height: none;
+}
+
+/* Remove table outline as rows have own focus style already. */
+#restoreTree:focus {
+    outline: 0;
+}
+
+/* Align dropdown with title first line. */
+#restoreTree td + td {
+    padding-top: 4px;
+    vertical-align: top;
+}
+
+/* Reduce space between toggle and menu on mobile. */
+#restoreTree .dropdown-toggle {
+    margin-bottom: 0;
+}
+
+/* Change direction to remain on screen on mobile. */
+#restoreTree .dropdown-menu {
+    left: auto;
+    right: 0;
+}
+
+/* Ensure maximum space for filtering and date range. */
+#restoreVersions .form-group,
+#restoreVersions .form-control {
+    width: 100%;
+}
+
 /** Footer nav on small devices **/
 @media (max-width: 1199px) {
     /* Stay at the end of the page, with space reserved for the footer
@@ -396,10 +452,6 @@ ul.three-columns li, ul.two-columns li {
     padding-top: 10px;
 }
 
-.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 */
@@ -420,12 +472,18 @@ ul.three-columns li, ul.two-columns li {
         width: 100%;
     }
 
-    /* all buttons, except panel headings, get bottom margin, as they won't fit
-       beside each other anymore */
+    /* All buttons, except panel headings, get bottom margin, as they
+       won't fit beside each other anymore. Reduce footer padding to
+       compensate for the margin. */
     .btn:not(.panel-heading),
-    /* this "+"-selector is needed to override some bootstrap defaults */
     .btn:not(.panel-heading) + .btn:not(.panel-heading) {
-        margin-bottom: 1rem;
+        margin-bottom: 10px;
+    }
+    .panel-footer {
+        padding-bottom: 0;
+    }
+    .modal-footer {
+        padding-bottom: 5px;
     }
 }
 

gui/default/assets/css/tree.css

@@ -0,0 +1,58 @@
+/*
+// Copyright (C) 2021 The Syncthing Authors.
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+*/
+
+.fancytree-container {
+    cursor: pointer;
+    width: 100%;
+}
+
+.fancytree-hide {
+    visibility: collapse;
+}
+
+/* Node needs to be block, and expander, icon and title
+   inline-block to properly wrap unbreakable text. */
+.fancytree-node {
+    display: block;
+    white-space: nowrap;
+    /* expander 16px + icon 16px + title padding 8px */
+    padding-right: 40px;
+}
+.fancytree-expander,
+.fancytree-icon,
+.fancytree-title {
+    display: inline-block;
+}
+
+.fancytree-expander,
+.fancytree-icon {
+    margin-top: 4px;
+    vertical-align: top;
+    width: 16px;
+}
+
+.fancytree-childcounter {
+    background: #777;
+    border-radius: 10px;
+    border: 1px solid gray;
+    color: #fff;
+    font-size: 13px;
+    opacity: .75;
+    padding: 2px 3px;
+    position: relative;
+    right: 8px;
+    top: -9px;
+    user-select: none;
+}
+
+.fancytree-title {
+    padding-left: 8px;
+    white-space: normal;
+    word-break: break-all;
+}