From 52cec1d906b5a11da9eafc42bddac090acdf6fcc Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 28 Sep 2022 08:41:20 +0300
Subject: [PATCH] fix: side borders being shown when screen width is smaller
 than 1720

---
 src/App.vue                          | 24 ++++++++++++------------
 src/assets/scss/Global/app-grid.scss |  5 +++++
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4c365e..b93d019 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,8 +7,8 @@
     id="app-grid"
     :class="{
       noSidebar: !settings.use_sidebar || !xl,
+      NoSideBorders: !xxl,
       extendWidth: settings.extend_width && settings.extend_width_enabled,
-      addBorderRight: xxl && !settings.extend_width,
     }"
   >
     <LeftSidebar />
@@ -24,33 +24,33 @@
 
 <script setup lang="ts">
 // @libraries
+import { vElementSize } from "@vueuse/components";
+import { onStartTyping } from "@vueuse/core";
 import { onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { onStartTyping } from "@vueuse/core";
-import { vElementSize } from "@vueuse/components";
 
 // @stores
-import useQStore from "@/stores/queue";
-import useModalStore from "@/stores/modal";
-import useContextStore from "@/stores/context";
-import useSettingsStore from "@/stores/settings";
 import { content_width } from "@/stores/content-width";
+import useContextStore from "@/stores/context";
+import useModalStore from "@/stores/modal";
+import useQStore from "@/stores/queue";
+import useSettingsStore from "@/stores/settings";
 
 // @utils
-import { xl, xxl } from "./composables/useBreakpoints";
 import handleShortcuts from "@/composables/useKeyboard";
 import { readLocalStorage, writeLocalStorage } from "@/utils";
+import { xl, xxl } from "./composables/useBreakpoints";
 
 // @small-components
-import Modal from "@/components/modal.vue";
 import ContextMenu from "@/components/ContextMenu.vue";
+import Modal from "@/components/modal.vue";
 import Notification from "@/components/Notification.vue";
 
 // @app-grid-components
-import NavBar from "@/components/nav/NavBar.vue";
-import LeftSidebar from "./components/LeftSidebar/index.vue";
-import RightSideBar from "@/components/RightSideBar/Main.vue";
 import BottomBar from "@/components/BottomBar.vue";
+import NavBar from "@/components/nav/NavBar.vue";
+import RightSideBar from "@/components/RightSideBar/Main.vue";
+import LeftSidebar from "./components/LeftSidebar/index.vue";
 
 const queue = useQStore();
 const router = useRouter();
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index 491fea7..f4b2ad6 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/src/assets/scss/Global/app-grid.scss
@@ -82,3 +82,8 @@ $g-border: solid 1px $gray5;
   //   margin-right: -1rem;
   // }
 }
+
+#app-grid.NoSideBorders {
+  border-right: none;
+  border-left: none;
+}