Fix source code UI bugs

gui-tests/source-viewer.goml

@@ -0,0 +1,39 @@
+// Checks that the docs.rs source code viewer page looks as expected.
+go-to: |DOC_PATH| + "/crate/sysinfo/latest/source/Cargo.toml"
+// We enforce a theme to ensure that the color checks will succeed.
+set-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+reload:
+
+// Bugs appears when window size is at maximum given width so we set it.
+set-window-size: (800, 800)
+
+// First we ensure that the "documentation link button" is taking only one line.
+store-size: (".doc-link > span", {"height": icon_height})
+store-size: (".doc-link", {"height": button_height})
+assert-css: (".doc-link", {"padding-top": "10px", "padding-bottom": "10px"})
+// As confirmed just above, there is 20px of padding, so we subtract it from the check below.
+assert: |button_height| - 20 < |icon_height| * 2
+
+// We check that hovering the side menu toggle will update the border color and also change the
+// mouse cursor.
+assert-css: (".toggle-source", {"border-color": "#4e4e4e", "cursor": "pointer"})
+assert-css: (".toggle-source > button", {"cursor": "pointer"})
+move-cursor-to: ".toggle-source > button"
+assert-css: (".toggle-source:hover", {"border-color": "#c0c0c0", "cursor": "pointer"})
+assert-css: (".toggle-source >button:hover", {"cursor": "pointer"})
+
+store-size: ("#side-menu", {"width": side_menu_width})
+store-size: ("#source-code-container", {"width": source_width})
+
+// Now we hide the side menu.
+click: ".toggle-source > button"
+wait-for: "#side-menu.collapsed"
+
+store-size: ("#side-menu", {"width": side_menu_width2})
+store-size: ("#source-code-container", {"width": source_width2})
+
+// The elements width should have changed (smaller side menu and bigger source).
+assert: |side_menu_width| > |side_menu_width2|
+assert: |source_width| < |source_width2|
+// The total width should not have changed.
+assert: |source_width2| + |side_menu_width2| == |source_width| + |side_menu_width|

templates/style/style.scss

@@ -453,6 +453,7 @@ div.package-sheet-container {
 }
 
 $sidebar-side-padding: 10px;
+$collapsed-side-menu-width: 46px;
 
 div.package-page-container {
     padding-bottom: 50px;
@@ -735,6 +736,7 @@ div.docsrs-package-container {
             padding: 10px;
             border: 1px solid var(--color-doc-link-background);
             border-radius: 5px;
+            min-width: fit-content;
 
             .fas {
                 margin-top: 2px;
@@ -818,6 +820,14 @@ ul.pure-menu-list {
         cursor: pointer;
         border: 1px solid var(--color-border);
         display: none;
+
+        &:hover {
+            border-color: var(--color-standard);
+        }
+
+        button {
+            cursor: pointer;
+        }
     }
 }
 
@@ -889,7 +899,7 @@ ul.pure-menu-list {
     }
 
     #side-menu.collapsed {
-        max-width: 46px;
+        max-width: $collapsed-side-menu-width;
 
         ul {
             li:not(.toggle-source), .text {
@@ -907,6 +917,10 @@ ul.pure-menu-list {
         }
     }
 
+    #side-menu.collapsed + #source-code-container {
+        width: calc(100% - #{$collapsed-side-menu-width});
+    }
+
     #source-warning {
         height: 100%;
     }