fix(css): fix reactive view for small screens

Author: dvcol

src/components/common/navbar/NavbarComponent.vue

@@ -86,6 +86,7 @@ const navElement = ref<HTMLElement>();
     >
       <template v-for="_route in enabledRoutes" :key="_route">
         <NTab
+          class="tab"
           :style="
             _route === activeRoute
               ? { '--n-tab-text-color-hover': 'var(--navbar-text-color-hover-active)' }
@@ -159,6 +160,10 @@ nav {
       height: calc(#{layout.$header-navbar-height} - 0.75rem) !important;
       border-radius: 0.5rem !important;
     }
+
+    :deep(.tab) {
+      padding: 0 0.25rem;
+    }
   }
 }
 </style>

src/components/views/calendar/CalendarNavbar.vue

@@ -50,7 +50,7 @@ const open = ref(false);
 </script>
 
 <template>
-  <NFlex class="row" align="center" justify="space-evenly" :vertical="false">
+  <NFlex class="row" align="center" justify="space-evenly" :wrap="false">
     <NDatePicker
       v-model:show="open"
       v-model:value="pickerValue"
@@ -98,13 +98,17 @@ const open = ref(false);
 .row {
   width: 100%;
   padding: 0 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
 
   .date-picker {
     flex: 0 1 33%;
+    min-width: fit-content;
   }
 
   .search-input {
     flex: 1 1 33%;
+    min-width: 12rem;
   }
 }
 </style>

src/components/views/history/HistoryNavbar.vue

@@ -55,7 +55,7 @@ const open = ref(false);
 </script>
 
 <template>
-  <NFlex class="row" align="center" justify="space-evenly" :vertical="false">
+  <NFlex class="row" align="center" justify="space-evenly" :wrap="false">
     <NDatePicker
       v-model:show="open"
       class="date-picker"
@@ -99,20 +99,29 @@ const open = ref(false);
 .row {
   width: 100%;
   padding: 0 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
 
   .date-picker {
     flex: 0 1 33%;
+    min-width: 14rem;
   }
 
   .search-input {
     flex: 1 1 calc(46% - 5rem);
+    min-width: 12rem;
   }
 }
 </style>
 
 <style lang="scss">
 .n-date-panel {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: min(36.5rem, 100dvw);
   margin-top: 12px;
   margin-left: -16px;
+  scrollbar-width: thin;
 }
 </style>

src/components/views/releases/ReleasesNavbar.vue

@@ -51,7 +51,7 @@ onBeforeMount(() => fetchRegions());
 </script>
 
 <template>
-  <NFlex class="row" align="center" justify="space-evenly" :vertical="false">
+  <NFlex class="row" align="center" justify="space-evenly" :wrap="false">
     <NSelect
       v-model:value="releaseType"
       class="type-select"
@@ -92,17 +92,22 @@ onBeforeMount(() => fetchRegions());
 .row {
   width: 100%;
   padding: 0 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
 
   .type-select {
     flex: 0 0 10rem;
+    min-width: fit-content;
   }
 
   .region-select {
     flex: 1 0 10rem;
+    min-width: fit-content;
   }
 
   .date-picker {
     flex: 2 1 48%;
+    min-width: fit-content;
   }
 }
 </style>

src/components/views/search/SearchNavbar.vue

@@ -167,7 +167,7 @@ onActivated(() => {
 </script>
 
 <template>
-  <NFlex class="row" align="center" justify="center" :vertical="false">
+  <NFlex class="row" align="center" justify="space-evenly" :wrap="false">
     <NSelect
       v-model:value="selectedValues"
       v-model:show="open"
@@ -308,13 +308,17 @@ onActivated(() => {
 .row {
   width: 100%;
   padding: 0 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
 
   .types-select {
     flex: 0 1 12rem;
+    min-width: fit-content;
   }
 
   .search-input {
     flex: 1 1 30%;
+    min-width: 12rem;
   }
 }
 </style>

src/components/views/settings/SettingsAccount.vue

@@ -394,16 +394,23 @@ useWatchActivated(
   }
 }
 
+.limit-card,
+.stats-card {
+  overflow: auto;
+
+  :deep(.detail) {
+    min-width: max-content;
+  }
+}
+
 .limit-card {
   :deep(.detail) {
     flex-basis: 31%;
-    min-width: max-content;
   }
 }
 
 .stats-card {
   :deep(.detail) {
-    flex-basis: 42%;
     min-width: max-content;
   }
 }

src/components/views/settings/SettingsConnect.vue

@@ -85,7 +85,7 @@ useWatchActivated(
       :style="{ '--n-border-color': 'var(--border-color)' }"
       hoverable
     >
-      <NFlex align="center" size="large" :wrap="false">
+      <NFlex align="center" size="large" wrap>
         <NButton text @click="onClick">
           <NAvatar
             v-if="avatar"

src/components/views/watchlist/WatchlistNavbar.vue

@@ -102,7 +102,7 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
 </script>
 
 <template>
-  <NFlex class="row" align="center" justify="center" :vertical="false">
+  <NFlex class="row" align="center" justify="space-evenly" :wrap="false">
     <NSelect
       v-model:value="selectValue"
       v-model:show="open"
@@ -142,13 +142,17 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
 .row {
   width: 100%;
   padding: 0 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
 
   .list-select {
     flex: 0 1 33%;
+    min-width: fit-content;
   }
 
   .search-input {
-    flex: 1 1 calc(56% - 5rem);
+    flex: 1 1 auto;
+    min-width: 12rem;
   }
 }
 </style>