FIX: Mobile nav styling (#14309)

app/assets/stylesheets/mobile/discourse.scss

@@ -49,11 +49,7 @@ blockquote {
   margin: 0;
   padding: 0;
   list-style: none;
-  overflow: visible;
   position: relative;
-  border: 1px solid var(--primary-medium);
-  // Prevents the dropdowns from collapsing while content loads, so they look more like placeholders and less like dark 2px lines
-  min-height: 37px;
 
   a {
     color: var(--primary);
@@ -63,22 +59,22 @@ blockquote {
     }
   }
 
-  > li > a {
+  > li > a.expander {
     display: flex;
     align-items: center;
-    padding: 8px 10px;
-    height: 100%;
-    box-sizing: border-box;
-  }
+    @include form-item-sizing;
+    border-color: var(--primary-medium);
+    max-width: 100%;
+    .selection {
+      @include ellipsis;
+      max-width: 120px;
+    }
 
-  .expander .selection {
-    @include ellipsis;
-  }
-
-  .expander > .d-icon {
-    &:last-of-type {
-      margin-left: auto;
-      margin-right: 0;
+    > .d-icon {
+      &:last-of-type {
+        margin-left: auto;
+        margin-right: 0;
+      }
     }
   }
 

app/assets/stylesheets/mobile/user.scss

@@ -64,10 +64,6 @@
     padding: 0;
     flex: 1 1 auto;
     .select-kit-header {
-      .select-kit-header-wrapper {
-        padding: 8px 10px;
-      }
-
       .caret-icon {
         color: var(--primary-medium);
       }
@@ -83,8 +79,6 @@
     margin-left: 8px;
 
     .select-kit-header {
-      height: 100%;
-
       .selected-name .name {
         display: none;
       }