From f059cc0291fd936136f0ced45011aaffa1001b6e Mon Sep 17 00:00:00 2001
From: Marco Crapts <marco.crapts@kpn.com>
Date: Thu, 25 May 2023 10:50:40 +0200
Subject: [PATCH] fix layout

---
 src/App.vue                        | 72 +++++++++++++++++++++++++-----
 src/components/Note/NoteEditor.vue |  2 +-
 src/components/TopBar.vue          |  2 +-
 src/components/ViewModes/Note.vue  |  2 +-
 src/style.scss                     | 23 +++++++---
 5 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 462a334..12e7d7a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@ import {
   setClientKey,
   passphraseRequired
 } from '@/composables/useEncryption'
-import { initializeSettings} from '@/composables/useSettings'
+import { initializeSettings } from '@/composables/useSettings'
 import { windowIsMobile } from '@/utils/helpers'
 import SideBar from '@/components/SideBar.vue'
 import firebase from 'firebase/compat/app'
@@ -56,24 +56,25 @@ provide('loading', loading)
     :side-bar-collapsed="sideBarCollapsed"
     @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
   />
+  <!-- <div class="absolute bottom-0 left-0 right-0 top-[50px] mx-auto flex flex-grow"> -->
   <div class="mx-auto flex w-full max-w-app flex-grow">
     <Transition name="sidebar">
-        <SideBar
-          :view-modes="viewModes"
-          :active-view-mode="activeViewMode"
-          @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
-          @collapse="(collapse) => (sideBarCollapsed = collapse)"
-          class="mt-[50px] bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
-          v-if="!sideBarCollapsed"
-        />
+      <SideBar
+        :view-modes="viewModes"
+        :active-view-mode="activeViewMode"
+        @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
+        @collapse="(collapse) => (sideBarCollapsed = collapse)"
+        class="mt-[50px] bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
+        v-if="!sideBarCollapsed"
+      />
     </Transition>
     <main
-      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-3"
+      class="transition[margin-left] z-10 mx-auto flex h-full w-full max-w-app flex-col overflow-y-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-3"
       :class="sideBarCollapsed ? 'ml-0' : 'sm:ml-sidebar'"
     >
       <Transition name="overlay">
         <div
-          class="absolute bottom-0 left-0 right-0 top-0 bg-neutral-800 bg-opacity-60 transition-opacity duration-200 sm:hidden cursor-pointer z-40"
+          class="absolute bottom-0 left-0 right-0 top-0 z-40 cursor-pointer bg-neutral-800 bg-opacity-60 transition-opacity duration-200 sm:hidden"
           @click="sideBarCollapsed = true"
           v-if="!sideBarCollapsed"
         />
@@ -90,13 +91,57 @@ provide('loading', loading)
         <Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
       </template>
       <SkeletonNote v-else />
+      <!-- <div>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+        <p>bla</p>
+      </div> -->
     </main>
   </div>
   <Modal :open="passphraseRequired" :persistent="true">
     <template #title>Enter your passphrase</template>
     <template #default>
       <p>
-        Your notes are encrypted. Please enter your encryption key passphrase to decrypt your cloud notes.
+        Your notes are encrypted. Please enter your encryption key passphrase to decrypt your cloud
+        notes.
       </p>
       <input type="password" class="input-bordered input mt-4 w-full" v-model="passphrase" />
     </template>
@@ -114,4 +159,7 @@ provide('loading', loading)
 .overlay-leave-to {
   @apply opacity-0;
 }
+main {
+  contain: size layout style;
+}
 </style>
diff --git a/src/components/Note/NoteEditor.vue b/src/components/Note/NoteEditor.vue
index 2d8327e..417619b 100644
--- a/src/components/Note/NoteEditor.vue
+++ b/src/components/Note/NoteEditor.vue
@@ -159,7 +159,7 @@ const createLink = (link: string) => {
 }
 </script>
 <template>
-  <div class="relative" ref="editorElement">
+  <div class="relative overflow-x-hidden" ref="editorElement">
     <CKEditor
       class="w-full flex-grow text-[110%] font-light"
       :editor="editor"
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 225ba9a..8bbefbb 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -20,7 +20,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
 </script>
 <template>
   <div
-    class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary"
+    class="z-[500] flex h-[50px] bg-primary"
     :class="searchActive && 'search-active'"
   >
     <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
diff --git a/src/components/ViewModes/Note.vue b/src/components/ViewModes/Note.vue
index 99843cb..5356126 100644
--- a/src/components/ViewModes/Note.vue
+++ b/src/components/ViewModes/Note.vue
@@ -42,7 +42,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
 }
 </script>
 <template>
-  <div class="flex h-full flex-col">
+  <div class="flex flex-grow flex-col">
     <NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
       <template #title>
         <i
diff --git a/src/style.scss b/src/style.scss
index c1a9106..ac5c8d3 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -5,17 +5,28 @@
 @import '@fontsource/source-sans-pro/300';
 
 html {
-  height: -webkit-fill-available;
+  // height: -webkit-fill-available;
+  height: 100%;
+  width: 100%;
 }
 
 body {
-  min-height: 100vh;
-  min-height: -webkit-fill-available;
+  // min-height: 100vh;
+  // min-height: -webkit-fill-available;
+  height: 100%;
+  min-height: 100%;
+  width: 100%;
+  max-width: 100%;
+  position: fixed;
+  transform: translateZ(0);
+  touch-action: manipulation;
+  -webkit-user-drag: none;
+  -ms-content-zooming: none;
   font-family: 'Source Sans Pro', sans-serif;
-  overflow-y: scroll;
+  // overflow-y: scroll;
   @apply flex flex-col bg-gray-100;
   #app {
-    @apply flex flex-grow flex-col;
+    @apply absolute bottom-0 left-0 right-0 top-0 flex flex-grow flex-col overflow-hidden;
   }
 }
 
@@ -45,7 +56,7 @@ p:last-child {
     @apply cursor-pointer font-semibold text-primary hover:bg-gray-200;
   }
   &.ck.ck-editor__editable_inline > * {
-    margin: 0!important;
+    margin: 0 !important;
   }
   ol,
   ul {