From aaec54f36abd3e360662a1be6bb84a50ad96d136 Mon Sep 17 00:00:00 2001
From: ThaumRystra <9525416+ThaumRystra@users.noreply.github.com>
Date: Sun, 12 Nov 2023 15:05:46 +0200
Subject: [PATCH] Fixed docs siblings display on small screens

---
 app/imports/client/ui/docs/DocViewer.vue | 65 ++++++++++++++++--------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/app/imports/client/ui/docs/DocViewer.vue b/app/imports/client/ui/docs/DocViewer.vue
index 661cf158..90738a4e 100644
--- a/app/imports/client/ui/docs/DocViewer.vue
+++ b/app/imports/client/ui/docs/DocViewer.vue
@@ -1,27 +1,32 @@
 <template>
-  <v-row justify="center">
+  <v-row
+    justify="center"
+    class="doc-viewer"
+  >
     <v-col
       cols="12"
       lg="8"
+      class="pt-0"
     >
-      <v-card
-        style="float: right; z-index: 4;"
-        class="ma-4"
-      >
-        <v-fade-transition mode="out-in">
-          <v-list
-            v-if="siblingDocs.length > 1"
-            :dense="siblingDocs.length > 5"
-          >
-            <doc-list-item
-              v-for="sibling in siblingDocs"
-              :key="sibling._id"
-              :doc="sibling"
-              :icon="siblingHasIcon"
-            />
-          </v-list>
-        </v-fade-transition>
-      </v-card>
+      <div class="sibling-list-parent">
+        <v-card
+          class="sibling-list"
+        >
+          <v-fade-transition mode="out-in">
+            <v-list
+              v-if="siblingDocs.length > 1"
+              :dense="siblingDocs.length > 5"
+            >
+              <doc-list-item
+                v-for="sibling in siblingDocs"
+                :key="sibling._id"
+                :doc="sibling"
+                :icon="siblingHasIcon"
+              />
+            </v-list>
+          </v-fade-transition>
+        </v-card>
+      </div>
       <v-fade-transition mode="out-in">
         <div
           :key="doc && doc.name || 'Documentation Home'"
@@ -133,4 +138,24 @@ export default {
     },
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="css" scoped>
+@media (min-width: 500px) {
+  .sibling-list-parent {
+    float: right;
+    z-index: 4;
+  }
+  .sibling-list {
+    display: block !important;
+  }
+}
+.sibling-list-parent {
+  text-align: right;
+  margin: 0 16px 8px;
+}
+.sibling-list {
+  text-align: left;
+  display: inline-block;
+}
+</style>
\ No newline at end of file