fix(responsive): adjust navbar element to fit smaller screens

Author: dvcol

src/components/common/navbar/NavbarPageSizeSelect.vue

@@ -81,6 +81,10 @@ const pageIcon = computed(() => (pageSize.value > 200 ? IconPageDouble : IconPag
 <style scoped lang="scss">
 .page-select {
   flex: 0 0 5rem;
+
+  @media (width < 600px) {
+    max-width: 2.125rem;
+  }
 }
 </style>
 

src/components/views/calendar/CalendarNavbar.vue

@@ -115,6 +115,11 @@ const open = ref(false);
   .date-picker {
     flex: 0 1 33%;
     min-width: fit-content;
+
+    @media (width < 600px) {
+      flex: 0 0 8rem;
+      min-width: auto;
+    }
   }
 
   .search-input {

src/components/views/history/HistoryNavbar.vue

@@ -116,10 +116,15 @@ const open = ref(false);
   .date-picker {
     flex: 0 1 33%;
     min-width: 14rem;
+
+    @media (width < 600px) {
+      flex: 1 0 9rem;
+      min-width: auto;
+    }
   }
 
   .search-input {
-    flex: 1 1 calc(46% - 5rem);
+    flex: 2 1 calc(46% - 5rem);
     min-width: 12rem;
   }
 }
@@ -142,6 +147,20 @@ const open = ref(false);
     max-height: calc(var(--full-height) - #{layout.$safe-header-open-drawer-height});
     overflow: auto;
     scrollbar-width: thin;
+
+    @media (width < 600px) {
+      .n-date-panel-calendar--start {
+        margin-right: 5.0625rem;
+      }
+
+      .n-date-panel-actions {
+        flex: 0 1 auto;
+
+        .n-date-panel-actions__suffix {
+          flex-direction: column;
+        }
+      }
+    }
   }
 }
 </style>

src/components/views/releases/ReleasesNavbar.vue

@@ -93,6 +93,7 @@ useActiveAndDocumentVisible({
       :options="regionOptions"
       :loading="regionLoading"
       :disabled="loading || regionLoading || !regionOptions.length"
+      :consistent-menu-width="false"
       :to="parentElement"
       filterable
       clearable
@@ -110,16 +111,31 @@ useActiveAndDocumentVisible({
   .type-select {
     flex: 0 0 10rem;
     min-width: fit-content;
+
+    @media (width < 600px) {
+      flex: 0 0 7rem;
+      min-width: auto;
+    }
   }
 
   .region-select {
     flex: 1 0 10rem;
     min-width: fit-content;
+
+    @media (width < 600px) {
+      flex: 2 0 6rem;
+      min-width: auto;
+    }
   }
 
   .date-picker {
     flex: 2 1 48%;
     min-width: fit-content;
+
+    @media (width < 600px) {
+      flex: 1 0 8rem;
+      min-width: auto;
+    }
   }
 }
 </style>

src/components/views/search/SearchNavbar.vue

@@ -327,11 +327,20 @@ onActivated(() => {
   .types-select {
     flex: 0 1 12rem;
     min-width: fit-content;
+
+    @media (width < 600px) {
+      flex: 0 2 8rem;
+      min-width: auto;
+    }
   }
 
   .search-input {
-    flex: 1 1 30%;
+    flex: 2 1 30%;
     min-width: 12rem;
+
+    @media (width < 600px) {
+      min-width: auto;
+    }
   }
 }
 </style>
@@ -340,4 +349,19 @@ onActivated(() => {
 .search-tooltip.search-tooltip {
   margin-top: 12px;
 }
+
+@media (width < 400px) {
+  .n-auto-complete.search-input .n-input-wrapper .n-base-loading.n-base-suffix {
+    display: none;
+    background-color: red;
+  }
+}
+
+@media (width < 600px) {
+  .n-select.types-select
+    .n-base-selection-tags
+    .n-base-selection-tag-wrapper:nth-child(2) {
+    display: none;
+  }
+}
 </style>

src/components/views/watchlist/WatchlistNavbar.vue

@@ -125,6 +125,7 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
       :render-tag="renderTag"
       filterable
       :placement="placement"
+      :consistent-menu-width="false"
     >
       <template #arrow>
         <NIcon :component="open ? IconLoop : selectedIcon" />
@@ -165,6 +166,11 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
   .list-select {
     flex: 0 1 33%;
     min-width: fit-content;
+
+    @media (width < 600px) {
+      flex: 0 0 8rem;
+      min-width: auto;
+    }
   }
 
   .search-input {