diff --git a/dockerfiles/Dockerfile-gui-tests b/dockerfiles/Dockerfile-gui-tests index 9f0440331..4b6e9a221 100644 --- a/dockerfiles/Dockerfile-gui-tests +++ b/dockerfiles/Dockerfile-gui-tests @@ -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.20.1 --unsafe-perm=true +RUN npm install -g browser-ui-test@0.20.5 --unsafe-perm=true EXPOSE 3000 diff --git a/gui-tests/topbar-resize.goml b/gui-tests/topbar-resize.goml index 62282a071..ba02018d4 100644 --- a/gui-tests/topbar-resize.goml +++ b/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], block { set-window-size: (|width|, |window_height|) wait-for-css: (".nav-container > .container a > .title", {"display": |text_display|}) @@ -12,13 +12,17 @@ define-function: ( // We check that there is no horizontal scrollbar (which would be because of docs.rs // topbar). assert-window-property: {"innerWidth": |width|} + wait-for-document-property: {"documentElement"."clientWidth": |width|} - assert-css: ("#search-input-nav", {"display": |search_display|, "max-width": |search_max_width|}) assert-size: ("body > .nav-container", {"height": |top_navbar_height|}) // And finally we check that the top navbar height didn't change. store-size: ("body > .nav-container", {"height": tmp_top_navbar_height}) assert: |tmp_top_navbar_height| == |top_navbar_height| + + // Checks that there is no x-axis scrollbar. + // If the scroll width is the same as the viewport width, then all good! + assert-document-property: {"body"."scrollWidth": |width|} } ) @@ -33,60 +37,51 @@ define-function: ( "width": 1000, "text_display": "inline", "search_display": "block", - "search_max_width": "200px", }) call-function: ("check-topbar", { "width": 900, "text_display": "inline", "search_display": "block", - "search_max_width": "200px", }) call-function: ("check-topbar", { "width": 872, "text_display": "inline", "search_display": "block", - "search_max_width": "200px", }) // From this point, text should not be displayed anymore. call-function: ("check-topbar", { "width": 871, "text_display": "none", "search_display": "block", - "search_max_width": "200px", }) call-function: ("check-topbar", { "width": 768, "text_display": "none", "search_display": "block", - "search_max_width": "200px", }) // From this point, search input should be smaller. call-function: ("check-topbar", { "width": 767, "text_display": "none", "search_display": "block", - "search_max_width": "150px", }) call-function: ("check-topbar", { "width": 568, "text_display": "none", "search_display": "block", - "search_max_width": "150px", }) // From this point, search input should not be displayed anymore. call-function: ("check-topbar", { "width": 567, "text_display": "none", "search_display": "none", - "search_max_width": "150px", }) // Even at very small width, we maintain the height of the topbar, but such cases will very likely // never happen "in real life". call-function: ("check-topbar", { - "width": 272, + "width": 310, "text_display": "none", "search_display": "none", - "search_max_width": "150px", }) } ) diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss index 3e12a3ecf..bd173f8ea 100644 --- a/templates/style/_navbar.scss +++ b/templates/style/_navbar.scss @@ -99,13 +99,12 @@ div.nav-container { } form.landing-search-form-nav { - max-width: 1200px; + width: 100%; height: 100%; display: flex; flex-direction: row; #search-input-nav { - max-width: 150px; display: none; border-left: 1px solid var(--color-border); height: 100%; @@ -127,12 +126,11 @@ div.nav-container { input, select { border: none; - margin: 0 1em 0 0; + margin: 0; font-size: 12.8px; box-shadow: none; background-color: var(--color-background); height: 100%; - width: 50%; } } @@ -269,13 +267,6 @@ div.nav-container { &.not-latest.yanked { $medium-width: 1191px; - // Because this message is very long, steal some additional space from the search input - #search-input-nav { - @media screen and (min-width: #{$medium-width}) { - max-width: 150px; - } - } - @include navbar-menu-labels($medium-width, $full-width, $show-full: false); } }