From c415fdb70af066053c4510bec7b20cdd01797cea Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 5 Apr 2022 14:55:30 +0530
Subject: [PATCH] refactor: improve ui consistency

---
 packages/hoppscotch-app/assets/scss/styles.scss   | 7 -------
 packages/hoppscotch-app/components/app/Footer.vue | 2 +-
 packages/hoppscotch-app/layouts/default.vue       | 5 +++--
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 940d3f84a..6bf32b093 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -496,13 +496,6 @@ details summary::-webkit-details-marker {
   }
 }
 
-// https://pqina.nl/blog/fix-google-mobile-usability-issues/
-:where(body, iframe, pre, img, svg, video, canvas, select) {
-  @apply max-w-full;
-  @apply overflow-auto;
-  @apply break-words;
-}
-
 .env-highlight {
   * {
     @apply text-accentContrast;
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index 1750af5bc..acb6fe0b7 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -169,7 +169,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           svg="columns"
-          class="hidden transform sm:inline"
+          class="transform"
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
diff --git a/packages/hoppscotch-app/layouts/default.vue b/packages/hoppscotch-app/layouts/default.vue
index 6c8129fdf..cf40259f3 100644
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -87,7 +87,7 @@ function appLayout() {
 
   // Initially apply
   onBeforeMount(() => {
-    if (mdAndLarger.value) {
+    if (!mdAndLarger.value) {
       rightSidebar.value = false
       columnLayout.value = true
     }
@@ -95,7 +95,8 @@ function appLayout() {
 
   // Listen for updates
   watch(mdAndLarger, () => {
-    if (!mdAndLarger.value) {
+    if (mdAndLarger.value) rightSidebar.value = true
+    else {
       rightSidebar.value = false
       columnLayout.value = true
     }