From add2574859847c47f9b36c04a96f17b15e03d2a2 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 4 Feb 2022 11:16:04 +0800
Subject: [PATCH] fix(webui): better display of readlist context information
 for small screen

closes #791
---
 komga-webui/src/views/BrowseBook.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
index 45edc8c88..9fda2f3be 100644
--- a/komga-webui/src/views/BrowseBook.vue
+++ b/komga-webui/src/views/BrowseBook.vue
@@ -27,7 +27,7 @@
 
       <!--   Context notification for navigation   -->
       <v-alert
-        v-if="contextReadList"
+        v-if="contextReadList && $vuetify.breakpoint.mdAndUp"
         type="info"
         text
         dense
@@ -84,6 +84,19 @@
     </toolbar-sticky>
 
     <v-container fluid class="pa-6">
+      <!--   Context notification for navigation   -->
+      <v-row>
+        <v-alert
+          v-if="contextReadList && $vuetify.breakpoint.smAndDown"
+          type="info"
+          text
+          dense
+          border="right"
+          class="mb-0"
+        >{{ $t('browse_book.navigation_within_readlist', {name: contextName}) }}
+        </v-alert>
+      </v-row>
+
       <v-row>
         <v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
           <item-card