refactor(webui): use breakpoint conditionals

Author: gotson

Diff for: komga-webui/src/views/BrowseCollections.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$vuetify.breakpoint.name === 'xs' ? 'margin-bottom: 56px' : undefined">
+  <div :style="$vuetify.breakpoint.xs ? 'margin-bottom: 56px' : undefined">
     <toolbar-sticky v-if="selectedCollections.length === 0">
       <!--   Action menu   -->
       <library-actions-menu v-if="library"

Diff for: komga-webui/src/views/BrowseLibraries.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$vuetify.breakpoint.name === 'xs' ? 'margin-bottom: 56px' : undefined">
+  <div :style="$vuetify.breakpoint.xs ? 'margin-bottom: 56px' : undefined">
     <toolbar-sticky v-if="selectedSeries.length === 0">
       <!--   Action menu   -->
       <library-actions-menu v-if="library"

Diff for: komga-webui/src/views/BrowseReadLists.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$vuetify.breakpoint.name === 'xs' ? 'margin-bottom: 56px' : undefined">
+  <div :style="$vuetify.breakpoint.xs ? 'margin-bottom: 56px' : undefined">
     <toolbar-sticky v-if="selectedReadLists.length === 0">
       <!--   Action menu   -->
       <library-actions-menu v-if="library"

Diff for: komga-webui/src/views/DashboardView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$vuetify.breakpoint.name === 'xs' ? 'margin-bottom: 56px' : undefined">
+  <div :style="$vuetify.breakpoint.xs ? 'margin-bottom: 56px' : undefined">
     <toolbar-sticky v-if="individualLibrary && selectedSeries.length === 0">
       <!--   Action menu   -->
       <library-actions-menu v-if="library"
@@ -311,7 +311,7 @@ export default Vue.extend({
       return this.$store.getters.meAdmin
     },
     fixedCardWidth(): number {
-      return this.$vuetify.breakpoint.name === 'xs' ? 120 : 150
+      return this.$vuetify.breakpoint.xs ? 120 : 150
     },
     allEmpty(): boolean {
       return this.loaderNewSeries?.items.length === 0 &&

Diff for: komga-webui/src/views/SearchView.vue

@@ -249,7 +249,7 @@ export default Vue.extend({
       return this.$store.getters.meAdmin
     },
     fixedCardWidth(): number {
-      return this.$vuetify.breakpoint.name === 'xs' ? 120 : 150
+      return this.$vuetify.breakpoint.xs ? 120 : 150
     },
     showToolbar(): boolean {
       return this.selectedSeries.length === 0 && this.selectedBooks.length === 0 && this.selectedCollections.length === 0 && this.selectedReadLists.length === 0