fix layout scrolling issue

changelog/unreleased/bugfix-scrolling-overflow

@@ -0,0 +1,8 @@
+Bugfix: Prevent scrolling issues
+
+In cases where the browser-window space was not enough to render all views
+the ui ended up with weird scrolling behavior.
+
+This has been fixed by restructuring the dom elements and giving them proper styles.
+
+https://github.com/owncloud/web/pull/5131

packages/web-app-files/src/App.vue

@@ -7,7 +7,7 @@
       :class="{ 'uk-visible@m': _sidebarOpen }"
       @dragover="$_ocApp_dragOver"
     >
-      <app-bar id="files-app-bar" :style="{ top: $_topBarVisible ? '60px' : '0' }" />
+      <app-bar id="files-app-bar" />
       <upload-progress v-show="$_uploadProgressVisible" id="files-upload-progress" class="oc-p-s" />
       <router-view id="files-view" />
     </div>
@@ -57,10 +57,6 @@ export default {
       return this.highlightedFile !== null
     },
 
-    $_topBarVisible() {
-      return !this.publicPage() && !this.$route.meta.verbose
-    },
-
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
     }
@@ -115,7 +111,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+main {
+  height: 100%;
+  max-height: 100%;
+  overflow-y: hidden;
+}
+
 .files-list-wrapper {
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: max-content max-content 1fr;
@@ -131,16 +136,17 @@ export default {
 }
 
 #files-sidebar {
-  position: sticky;
-  top: 60px;
-  max-height: calc(100vh - 60px);
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
 }
 
 #files-app-bar {
   position: sticky;
   height: auto;
   z-index: 1;
   grid-area: header;
+  top: 0;
 }
 
 #files-view {

packages/web-app-files/src/mixins/filesListPositioning.js

@@ -6,7 +6,7 @@ export default {
     adjustTableHeaderPosition() {
       this.$nextTick(() => {
         const appBar = document.querySelector('#files-app-bar')
-        this.headerPosition = appBar.getBoundingClientRect().bottom
+        this.headerPosition = appBar.getBoundingClientRect().height
       })
     }
   }

packages/web-app-files/src/views/LocationPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="files-location-picker" class="uk-flex uk-height-1-1">
+  <main id="files-location-picker" class="uk-flex uk-height-1-1">
     <div tabindex="-1" class="files-list-wrapper uk-width-expand">
       <div id="files-app-bar" class="oc-p-s">
         <h1 class="location-picker-selection-info oc-mb" v-text="title" />
@@ -74,7 +74,7 @@
         </template>
       </div>
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
@@ -435,7 +435,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#files-location-picker {
+  height: 100%;
+  max-height: 100%;
+  overflow-y: hidden;
+}
+
 .files-list-wrapper {
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: max-content 1fr;

packages/web-runtime/src/App.vue

@@ -4,112 +4,110 @@
     <skip-to target="main">
       <translate>Skip to main</translate>
     </skip-to>
-    <div id="web-container">
-      <div
-        v-if="user.isAuthenticated && !user.userReady"
-        class="loading-overlay"
-        :style="{
-          backgroundImage: 'url(' + configuration.theme.loginPage.backgroundImg + ')'
-        }"
-      >
-        <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" class="uk-position-center" />
-      </div>
-      <template v-else-if="!showHeader">
-        <router-view name="fullscreen" />
-      </template>
-      <div v-else id="web-content" key="core-content" class="uk-flex uk-flex-stretch">
-        <transition :name="appNavigationAnimation">
-          <focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
-            <oc-sidebar-nav
-              v-show="isSidebarVisible"
-              id="web-nav-sidebar"
-              v-touch:swipe.left="handleNavSwipe"
-              class="oc-app-navigation"
-              :accessible-label="$gettext('Navigation menu')"
-              :class="sidebarClasses"
-            >
-              <template #header>
-                <div class="uk-text-center">
-                  <oc-button
-                    v-if="isSidebarFixed"
-                    variation="inverse"
-                    appearance="raw"
-                    class="web-sidebar-btn-close"
-                    :aria-label="$gettext('Close navigation menu')"
-                    @click="toggleAppNavigationVisibility"
-                  >
-                    <oc-icon name="close" />
-                  </oc-button>
-                  <router-link ref="navigationSidebarLogo" to="/">
-                    <oc-logo :src="logoImage" :alt="sidebarLogoAlt" />
-                  </router-link>
-                </div>
-              </template>
-              <template #nav>
-                <oc-list>
-                  <oc-sidebar-nav-item
-                    v-for="link in sidebarNavItems"
-                    :key="link.route.path"
-                    :active="link.active"
-                    :target="link.route.path"
-                    :icon="link.icon || link.iconMaterial"
-                  >
-                    {{ link.name }}
-                  </oc-sidebar-nav-item>
-                </oc-list>
-              </template>
-              <template v-if="sidebar.sidebarFooterContentComponent" #footer>
-                <component :is="sidebar.sidebarFooterContentComponent" />
-              </template>
-            </oc-sidebar-nav>
-          </focus-trap>
-        </transition>
-        <div class="uk-width-expand web-content-container">
-          <top-bar
-            v-if="!publicPage() && !$route.meta.verbose"
-            id="oc-topbar"
-            class="uk-width-expand"
-            :applications-list="applicationsList"
-            :active-notifications="activeNotifications"
-            :user-id="user.username || user.id"
-            :user-display-name="user.displayname"
-            @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
-          />
-          <div id="main">
-            <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
-            <router-view class="oc-app-container" name="app" />
-          </div>
+    <div
+      v-if="user.isAuthenticated && !user.userReady"
+      class="loading-overlay"
+      :style="{
+        backgroundImage: 'url(' + configuration.theme.loginPage.backgroundImg + ')'
+      }"
+    >
+      <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" class="uk-position-center" />
+    </div>
+    <template v-else-if="!showHeader">
+      <router-view name="fullscreen" />
+    </template>
+    <div v-else id="web-content" key="core-content" class="uk-flex uk-flex-stretch">
+      <transition :name="appNavigationAnimation">
+        <focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
+          <oc-sidebar-nav
+            v-show="isSidebarVisible"
+            id="web-nav-sidebar"
+            v-touch:swipe.left="handleNavSwipe"
+            class="oc-app-navigation"
+            :accessible-label="$gettext('Navigation menu')"
+            :class="sidebarClasses"
+          >
+            <template #header>
+              <div class="uk-text-center">
+                <oc-button
+                  v-if="isSidebarFixed"
+                  variation="inverse"
+                  appearance="raw"
+                  class="web-sidebar-btn-close"
+                  :aria-label="$gettext('Close navigation menu')"
+                  @click="toggleAppNavigationVisibility"
+                >
+                  <oc-icon name="close" />
+                </oc-button>
+                <router-link ref="navigationSidebarLogo" to="/">
+                  <oc-logo :src="logoImage" :alt="sidebarLogoAlt" />
+                </router-link>
+              </div>
+            </template>
+            <template #nav>
+              <oc-list>
+                <oc-sidebar-nav-item
+                  v-for="link in sidebarNavItems"
+                  :key="link.route.path"
+                  :active="link.active"
+                  :target="link.route.path"
+                  :icon="link.icon || link.iconMaterial"
+                >
+                  {{ link.name }}
+                </oc-sidebar-nav-item>
+              </oc-list>
+            </template>
+            <template v-if="sidebar.sidebarFooterContentComponent" #footer>
+              <component :is="sidebar.sidebarFooterContentComponent" />
+            </template>
+          </oc-sidebar-nav>
+        </focus-trap>
+      </transition>
+      <div class="uk-width-expand web-content-container">
+        <top-bar
+          v-if="!publicPage() && !$route.meta.verbose"
+          id="oc-topbar"
+          class="uk-width-expand"
+          :applications-list="applicationsList"
+          :active-notifications="activeNotifications"
+          :user-id="user.username || user.id"
+          :user-display-name="user.displayname"
+          @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
+        />
+        <div id="main">
+          <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
+          <router-view class="oc-app-container" name="app" />
         </div>
       </div>
-      <transition
-        enter-active-class="uk-animation-fade uk-animation-fast"
-        leave-active-class="uk-animation-fade uk-animation-reverse uk-animation-fast"
-        name="custom-classes-transition"
-      >
-        <oc-modal
-          v-if="modal.displayed"
-          :variation="modal.variation"
-          :icon="modal.icon"
-          :title="modal.title"
-          :message="modal.message"
-          :has-input="modal.hasInput"
-          :focus-trap-active="true"
-          :input-label="modal.inputLabel"
-          :input-disabled="modal.inputDisabled"
-          :input-value="modal.inputValue"
-          :input-description="modal.inputDescription"
-          :input-error="modal.inputError"
-          :button-cancel-text="modal.cancelText"
-          :button-confirm-text="modal.confirmText"
-          :button-confirm-disabled="modal.confirmDisabled || !!modal.inputError"
-          @cancel="modal.onCancel"
-          @confirm="modal.onConfirm"
-          @input="modal.onInput"
-          @mounted="focusModal"
-          @beforeDestroy="focusModal"
-        />
-      </transition>
     </div>
+    <transition
+      enter-active-class="uk-animation-fade uk-animation-fast"
+      leave-active-class="uk-animation-fade uk-animation-reverse uk-animation-fast"
+      name="custom-classes-transition"
+    >
+      <oc-modal
+        v-if="modal.displayed"
+        :variation="modal.variation"
+        :icon="modal.icon"
+        :title="modal.title"
+        :message="modal.message"
+        :has-input="modal.hasInput"
+        :focus-trap-active="true"
+        :input-label="modal.inputLabel"
+        :input-disabled="modal.inputDisabled"
+        :input-value="modal.inputValue"
+        :input-description="modal.inputDescription"
+        :input-error="modal.inputError"
+        :button-cancel-text="modal.cancelText"
+        :button-confirm-text="modal.confirmText"
+        :button-confirm-disabled="modal.confirmDisabled || !!modal.inputError"
+        @cancel="modal.onCancel"
+        @confirm="modal.onConfirm"
+        @input="modal.onInput"
+        @mounted="focusModal"
+        @beforeDestroy="focusModal"
+      />
+    </transition>
   </div>
 </template>
 <script>
@@ -408,12 +406,12 @@ export default {
 html,
 body,
 #web,
-#web-container,
 #web-content {
   height: 100%;
+  overflow-y: hidden;
 }
 
-#web-container {
+#web {
   background-color: var(--oc-color-background-default);
 }
 
@@ -438,6 +436,7 @@ body,
 #main {
   position: relative;
   grid-area: main;
+  overflow-y: auto;
 }
 
 #oc-header {