Der Style der Ergebnisseite ist aktuell sauber, die Suchleiste Scrollt jedoch nicht mit.

resources/assets/less/metager/result-page.less

@@ -325,7 +325,6 @@ a {
 @additions-width-min: 400px;
 @additions-width-max: 500px;
 #resultpage-container {
-    width: 100%;
     margin: @padding-small-default;
     display: grid;
     grid-template-columns: @results-width-max @additions-width-max;
@@ -336,12 +335,16 @@ a {
     align-items: stretch;
     /**/
     background-color: #FAFAFA;
-    #research-bar {
+    #research-bar-anchor {
         grid-area: searchbar;
+        transform: translate(0, 0); // Makes the fixed research-bar inside set its width relative to the width of this element
         /**/
         min-width: @results-width-min;
         max-width: @results-width-max;
     }
+    #research-bar {
+        width: 100%;
+    }
     #research-bar-placeholder {
         grid-area: searchbar;
         /**/
@@ -376,6 +379,32 @@ a {
         grid-template-columns: 60fr 40fr;
         grid-template-areas: "searchbar ." "foki ." "results additions";
     }
+    @media (max-width: (@results-width-min + @additions-width-min + @padding-small-default * 4)) {
+        grid-template-columns: 100fr;
+        grid-template-areas: "searchbar" "foki" "results";
+        #additions-container {
+            display: none;
+        }
+    }
+    @media (max-width: (@results-width-min + @padding-small-default * 2)) {
+        // Fixes the width on very small displays
+        // Without a set min-width the width is just set to fit the content
+        #research-bar-anchor {
+            min-width: 0px;
+        }
+        #research-bar-placeholder {
+            min-width: 0px;
+        }
+        #foki {
+            min-width: 0px;
+        }
+        #results-container {
+            min-width: 0px;
+        }
+        #additions-container {
+            min-width: 0px;
+        }
+    }
 }
 
 @resultpage-leftbox-max-width: @results-width-max;
@@ -508,4 +537,21 @@ footer.resultPageFooter {
     @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
         margin: 20px 0 0 0;
     }
+}
+
+/* Searchbar Opener */
+
+#research-bar>.openSidebar {
+    display: none;
+    margin-right: 10px;
+    margin-left: 20px;
+}
+
+@media(max-width: (@results-width-max + @padding-small-default * 2 + 60px)) {
+    #resultpage-container>.openSidebar {
+        display: none;
+    }
+    #research-bar>.openSidebar {
+        display: initial;
+    }
 }
\ No newline at end of file

resources/assets/less/metager/sidebar.less

@@ -142,11 +142,13 @@ input#sideBarToggle:checked {
     }
 }
 
-label#openSidebar {
-    position: fixed;
-    top: 23px;
-    right: 25px;
-    z-index: 998;
+.openSidebar {
+    &.fixed {
+        position: fixed;
+        top: 23px;
+        right: 25px;
+        z-index: 998;
+    }
     font-size: 36px;
     line-height: 23px;
     border-radius: 5px;

resources/views/layouts/researchandtabs.blade.php

 <div id="resultpage-container">
-	<div id="research-bar">
-		<div id="header-logo">
-			<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
-				<h1>MetaGer</h1>
-			</a>
-			<a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
-				<h1>M</h1>
-			</a>
-		</div>
-		<div id="header-searchbar">
-			@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
+	<div id="research-bar-anchor">
+		<div id="research-bar">
+			<div id="header-logo">
+				<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
+					<h1>MetaGer</h1>
+				</a>
+				<a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
+					<h1>M</h1>
+				</a>
+			</div>
+			<div id="header-searchbar">
+				@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
+			</div>
+			@include('parts.sidebar-opener')
 		</div>
 	</div>
 	<div id="research-bar-placeholder">
 	</div>
+	@include('parts.sidebar-opener', ['class' => 'fixed'])
 	<div id="foki">
 		<div class="scrollbox">
 			<div class="foki-scrollfade-left"></div>

resources/views/parts/sidebar-opener.blade.php

+<label class="openSidebar {{$class or ''}}" role="button" for="sideBarToggle"></label>
\ No newline at end of file

resources/views/parts/sidebar.blade.php

 <input id="sideBarToggle" style="display: none;" type="checkbox">
-<label id="openSidebar" role="button" for="sideBarToggle"></label>
 <div class="sideBar">
   <label id="closeSidebar" role="button" for="sideBarToggle"></label>
   <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">