Removed sidenav toggle styling, removed justify content property, upd…

…ated to not use not selector for help button, added nowrap to prevent text wrapping on heading wrapper h1, updated sort by label dropdown div to have same pixel value as resource type, updated media query pixel allocation for dropdown toggle.
CenterForOpenScience · Aug 23, 2023 · b3da346 · b3da346
1 parent 0d33e8f
commit b3da346
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss
@@ -1,8 +1,15 @@
 // stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type
+
 body {
     background-color: $color-bg-gray-blue-light;
 }
 
+.search-page-mobile {
+    > div:first-of-type {
+        margin-left: 0;
+    }
+}
+
 .heading-wrapper-mobile {
     background-image: url('images/default-brand/bg-dark.jpg');
     background-color: $osf-dark-blue-navbar;
@@ -15,6 +22,7 @@ body {
         font-weight: 500;
         margin: 0.2rem;
         padding: 0.75rem 0 0.5rem 0.5rem;
+        white-space: nowrap;
     }
 
     span {
@@ -33,10 +41,6 @@ body {
             right: 0.1rem;
         }
     }
-
-    .sidenav-toggle {
-        width: 100%;
-    }
 }
 
 .left-panel-mobile {
@@ -53,7 +57,7 @@ body {
         margin-bottom: 1rem;
 
         label > div {
-            width: 193px;
+            width: 195px;
         }
     }
 }
@@ -81,7 +85,6 @@ body {
     color: $color-text-white;
     display: flex;
     align-items: center;
-    justify-content: flex-start;
     padding: 35px;
 
     label {
@@ -91,6 +94,7 @@ body {
 
     .heading-label > h1 {
         margin: 0;
+        white-space: nowrap;
     }
 }
 
@@ -140,7 +144,7 @@ body {
     }
 
     .search-button-wrapper {
-        button:not(.search-button, .help-button-mobile) {
+        .help-button {
             border-radius: 5px;
         }
 
@@ -357,12 +361,13 @@ body {
 }
 
 // for sizing between mobile and desktop
-@media screen and (min-width: 899px) and (max-width: 1250px) {
+@media screen and (min-width: 899px) and (max-width: 1275px) {
     .search-page > div:first-of-type {
         margin: 0 auto;
     }
 
     .heading-wrapper > label {
+        white-space: nowrap;
         padding-left: 0;
         margin: 0;
     }