Roughly allow GlobalSearch to expand rightwards

Author: taneliang

website/src/views/layout/GlobalSearch.scss

@@ -10,7 +10,7 @@ $dropdown-height: 40rem;
   composes: btn-svg from global;
   position: relative;
   height: 100%;
-  padding-right: $container-padding;
+  padding-left: $container-padding;
   margin-left: auto;
   font-size: 0.9rem;
 
@@ -23,37 +23,43 @@ $icon-dist: $input-width-open - $input-width;
 $icon-dist-lg: $input-width-open-lg - $input-width;
 
 .icon {
-  position: absolute;
-  right: $icon-dist + $container-padding;
+  // position: absolute;
+  // right: $icon-dist + $container-padding;
+  // position: relative;
+  // left: 0;
   width: $icon-size;
   height: $icon-size;
-  transform: translate($icon-dist - 0.25rem);
+  // transform: translate($icon-dist - 0.25rem);
   transition: all $desktop-entering-duration $material-deceleration-curve;
 
   @include media-breakpoint-up(lg) {
-    right: $icon-dist-lg + $container-padding;
-    transform: translate($icon-dist-lg - 0.25rem);
+    // right: $icon-dist-lg + $container-padding;
+    // transform: translate($icon-dist-lg - 0.25rem);
   }
 }
 
 .iconOpen {
   color: theme-color();
-  transform: translate(0);
+  // transform: translate(0);
 }
 
 .input {
-  position: absolute;
-  right: $input-width-open + $container-padding;
+  $overhang: $icon-size/2; // Extend clickable area to the left of icon
+  $internal-padding: $overhang; // Symmetrical padding around icon
+
+  position: relative;
   opacity: 0;
-  width: $input-width;
+  left: -$icon-size - $overhang;
+  padding-left: $icon-size + $overhang + $internal-padding;
+  width: $input-width + $overhang + $internal-padding;
   height: 100%;
-  padding-left: $input-width;
+
   border: 0;
   font-size: $font-size-s;
   color: var(--body-color);
   background: transparent;
   cursor: pointer;
-  transform: translate($input-width-open);
+  // transform: translate($input-width-open);
   transition: transform $desktop-entering-duration $material-deceleration-curve,
     opacity $desktop-entering-duration $material-deceleration-curve 75ms;
 
@@ -74,16 +80,13 @@ $icon-dist-lg: $input-width-open-lg - $input-width;
 
 .inputOpen {
   composes: openWidth;
-  right: 0;
   opacity: 1;
   cursor: auto;
-  transform: translate(0);
 }
 
 .selectListContainer {
   position: absolute;
-  top: $navbar-height - 0.5rem;
-  right: 0;
+  top: $navbar-height;
   z-index: $module-select-z-index;
   border: $input-btn-border-width solid $input-border-color;
   border-width: 0 $input-btn-border-width $input-btn-border-width;

website/src/views/layout/Navbar.scss

@@ -44,8 +44,8 @@ $logo-vert-padding: 0.875rem;
   display: flex;
   // Explicit width so the logo will not expand
   // to occupy the entire navbar
-  width: 12rem;
-  padding: $logo-vert-padding $grid-gutter-width;
+  width: 8.3rem;
+  margin: $logo-vert-padding $grid-gutter-width;
 }
 
 .brandLogo {
@@ -74,17 +74,6 @@ $logo-vert-padding: 0.875rem;
   text-align: right;
 }
 
-@include media-breakpoint-up(xl) {
-  .brand {
-    // Padding to match navtab left padding
-    padding-left: 2rem;
-  }
-
-  .navRight {
-    padding: $vert-padding $grid-gutter-width/2 $vert-padding 2rem;
-  }
-}
-
 @include media-breakpoint-down(sm) {
   .navbarWrapper {
     top: -$navbar-height;
@@ -98,11 +87,20 @@ $logo-vert-padding: 0.875rem;
 
     width: 100%;
   }
-}
 
-@include media-breakpoint-down(xs) {
   .brand {
     flex: 1;
-    padding: $logo-vert-padding 0;
+    margin: $logo-vert-padding 0 $logo-vert-padding $grid-gutter-width/2;
   }
 }
+
+// @include media-breakpoint-up(xl) {
+// .brand {
+//   // Padding to match navtab left padding
+//   padding-left: 2rem;
+// }
+
+// .navRight {
+//   padding: $vert-padding $grid-gutter-width/2 $vert-padding 2rem;
+// }
+// }

website/src/views/layout/Navtabs.scss

@@ -44,6 +44,10 @@ $divider-margin: 0.3rem;
 
   svg {
     margin-bottom: 0.1rem;
+
+    $icon-size: $font-size-lg; // TODO: Dedupe with GlobalSearch.scss $icon-size
+    width: $icon-size;
+    height: $icon-size;
   }
 }
 
@@ -52,6 +56,13 @@ $divider-margin: 0.3rem;
   font-size: 0.7rem;
   margin-left: 0.4rem;
   font-size: 1rem;
+
+  // TODO: Try this caps alternative
+  // margin-left: 0.5rem;
+  // font-size: 0.85rem;
+  // letter-spacing: 0.07rem;
+  // font-weight: 500;
+  // text-transform: uppercase;
 }
 
 .hiddenOnMobile {