Fix top navbar resize

Author: GuillaumeGomez

templates/header/topbar_begin.html

@@ -9,7 +9,8 @@
 <div class="nav-container">
     <div class="container">
         <div class="pure-menu pure-menu-horizontal" role="navigation" aria-label="Main navigation">
-            <form action="/releases/search" method="GET" class="landing-search-form-nav">
+            <form action="/releases/search" method="GET"
+                class="landing-search-form-nav {% if not is_latest_version %}not-latest{% endif %}">
                 {# The search bar #}
                 <div id="search-input-nav" class="pure-menu-right">
                     <label for="nav-search">

templates/rustdoc/topbar.html

@@ -8,7 +8,7 @@
 <ul class="pure-menu-list">
     {% if 'krate' in __tera_context %}
         <li class="pure-menu-item pure-menu-has-children">
-            <a href="#" class="pure-menu-link" title="{{ krate.description }}">
+            <a href="#" class="pure-menu-link crate-name" title="{{ krate.description }}">
                 {{ "cube" | fas }}
                 <span class="title">{{ krate.name }}-{{ krate.version }}</span>
             </a>
@@ -163,7 +163,7 @@
         </li>
     {% else %}
         <li class="pure-menu-item">
-            <a href="{{ crate_url | safe }}" class="pure-menu-link" title="{{ metadata.description }}">
+            <a href="{{ crate_url | safe }}" class="pure-menu-link crate-name" title="{{ metadata.description }}">
                 {{ "cube" | fas }}
                 <span class="title">{{ metadata.name }}-{{ metadata.version }}</span>
             </a>

templates/style/_navbar.scss

@@ -43,6 +43,12 @@ div.nav-container {
             color: var(--color-standard);
             background-color: inherit;
         }
+
+        &.crate-name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            max-width: 200px;
+        }
     }
 
     .pure-menu-right {
@@ -121,11 +127,38 @@ div.nav-container {
     // use a .title span inside a menu to hide it on small screens
     span.title {
         display: none;
-        @media #{$media-sm} {
+        @media screen and (min-width: 872px) {
+            display: inline;
+        }
+    }
+
+    .pure-menu-right span.title {
+        @media screen and (min-width: 872px) {
+            display: none;
+        }
+        @media screen and (min-width: 965px) {
             display: inline;
         }
     }
 
+    form.landing-search-form-nav.not-latest {
+        span.title {
+            display: none;
+            @media screen and (min-width: 973px) {
+                display: inline;
+            }
+        }
+
+        .pure-menu-right span.title {
+            @media screen and (min-width: 973px) {
+                display: none;
+            }
+            @media screen and (min-width: 1125px) {
+                display: inline;
+            }
+        }
+    }
+
     // Make menu item optional and disappear on small screens
     .pure-menu-opt {
         display: none;