Fix display of long crates name in release list

dockerfiles/Dockerfile-gui-tests

@@ -61,9 +61,9 @@ RUN apt-get install -y \
 RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | bash -s -- -y --default-toolchain nightly --no-modify-path --profile minimal
 ENV PATH="/root/.cargo/bin:${PATH}"
 
-RUN curl -sL https://nodejs.org/dist/v14.4.0/node-v14.4.0-linux-x64.tar.xz | tar -xJ
-ENV PATH="/node-v14.4.0-linux-x64/bin:${PATH}"
-ENV NODE_PATH="/node-v14.4.0-linux-x64/lib/node_modules/"
+RUN curl -sL https://nodejs.org/dist/v22.13.1/node-v22.13.1-linux-x64.tar.xz | tar -xJ
+ENV PATH="/node-v22.13.1-linux-x64/bin:${PATH}"
+ENV NODE_PATH="/node-v22.13.1-linux-x64/lib/node_modules/"
 
 WORKDIR /build
 
@@ -74,7 +74,7 @@ RUN mkdir out
 # https://github.com/puppeteer/puppeteer/issues/375
 #
 # We also specify the version in case we need to update it to go around cache limitations.
-RUN npm install -g browser-ui-test@0.16.10 --unsafe-perm=true
+RUN npm install -g browser-ui-test@0.20.1 --unsafe-perm=true
 
 EXPOSE 3000
 

gui-tests/long-crate-name.goml

@@ -0,0 +1,16 @@
+// Checks that the crate name in release list doesn't overflow when hovered.
+
+go-to: |DOC_PATH|
+// We reduce the width to 800px because the text will be on 3 different lines. Meaning
+// that if it overflows, the height will be smaller than expected since it will only take
+// 2 lines.
+set-window-size: (1200, 600)
+set-text: ("ul a.release .name", "blabla_under_something_longname_right-0.7.0")
+move-cursor-to: "ul a.release .name"
+assert-css: ("ul a.release .name:hover", { "line-height": "22.4px" })
+// 45 / 2 = 22.5, so it's on 2 lines
+assert-size: ("ul a.release .name:hover", { "height": 45 })
+// We reduce the width to it should now take 3 lines.
+set-window-size: (800, 600)
+// 67 / 2 = 33.5, so it's more than 2 lines
+assert-size: ("ul a.release .name:hover", { "height": 67 })

gui-tests/tester.js

@@ -122,9 +122,7 @@ async function main(argv) {
     const options = new Options();
     try {
         // This is more convenient that setting fields one by one.
-        const args = [
-            "--no-sandbox",
-        ];
+        const args = [];
         if (typeof process.env.SERVER_URL !== "undefined") {
             args.push("--variable", "DOC_PATH", process.env.SERVER_URL);
         } else {

gui-tests/topbar-resize.goml

@@ -4,7 +4,7 @@ store-value: (window_height, 1000)
 
 define-function: (
     "check-topbar",
-    (width, text_display, search_display, search_max_width),
+    [width, text_display, search_display, search_max_width],
     block {
         set-window-size: (|width|, |window_height|)
         wait-for-css: (".nav-container > .container a > .title", {"display": |text_display|})
@@ -24,7 +24,7 @@ define-function: (
 
 define-function: (
     "check-topbar-sizes",
-    (),
+    [],
     block {
         set-window-size: (1100, |window_height|)
         store-size: ("body > .nav-container", {"height": top_navbar_height})
@@ -92,7 +92,7 @@ define-function: (
 )
 
 go-to: |DOC_PATH| + "/sysinfo"
-call-function: ("check-topbar-sizes", ())
+call-function: ("check-topbar-sizes", {})
 
 go-to: |DOC_PATH| + "/releases/search?query=sysinfo"
-call-function: ("check-topbar-sizes", ())
+call-function: ("check-topbar-sizes", {})

templates/core/home.html

@@ -36,7 +36,7 @@ <h1 class="brand">{{ crate::icons::IconCubes.render_solid(false, false, "") }} D
                     <strong>Recent Releases</strong>
                 </a>
                 <a href="/releases/feed" title="Atom feed">
-                    {{ crate::icons::IconSquareRss.render_solid(false, false, "") }}
+                    {{- crate::icons::IconSquareRss.render_solid(false, false, "") -}}
                 </a>
             </div>
 
@@ -54,16 +54,16 @@ <h1 class="brand">{{ crate::icons::IconCubes.render_solid(false, false, "") }} D
                             class="release">
                             <div class="pure-g">
                                 <div class="pure-u-1 pure-u-sm-6-24 pure-u-md-5-24 name">
-                                    {{ release.name }}-{{ release.version }}
+                                    {{- release.name }}-{{ release.version -}}
                                 </div>
                                 <div class="pure-u-1 pure-u-sm-14-24 pure-u-md-16-24 description">
-                                    {{ release.description.as_deref().unwrap_or_default() }}
+                                    {{- release.description.as_deref().unwrap_or_default() -}}
                                 </div>
 
                                 {%- if let Some(build_time) = release.build_time -%}
-                                    <div class="pure-u-1 pure-u-sm-4-24 pure-u-md-3-24 date"
+                                    <div class="pure-u-1 pure-u-sm-4-24 pure-u-md-3-24 date" {#- #}
                                         title="{{ build_time.format("%FT%TZ") }}">
-                                        {{ build_time|timeformat }}
+                                        {{- build_time|timeformat -}}
                                     </div>
                                 {%- endif -%}
                             </div>

templates/style/style.scss

@@ -319,6 +319,9 @@ div.recent-releases-container {
 
         &:hover {
             background-color: transparent;
+            overflow: visible;
+            white-space: normal;
+            word-break: break-word;
         }
 
         &::before {
@@ -335,11 +338,6 @@ div.recent-releases-container {
         color: var(--color-standard);
     }
 
-    .name:hover {
-        overflow: visible;
-        white-space: normal;
-    }
-
     .build {
         font-weight: 500;