refactor: improve ui consistency

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;

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"
         />

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
     }