fix scrolling issues

Author: Filip Hric

src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav>
+  <nav class="shadow-xl">
     <button
       data-cy="home"
       :class="[route.path !== '/' ? 'visible' : 'invisible']"

src/components/board/BoardDetail.vue

@@ -30,7 +30,7 @@
     <!-- BOARD DETAIL -->
     <div
       v-if="!state.loading && !state.loadingError.show"
-      class="overflow-x-auto min-h-screen whitespace-nowrap"
+      class="overflow-x-auto whitespace-nowrap board-detail"
       data-cy="board-detail"
     >
       <div class="py-2.5">
@@ -75,14 +75,14 @@
       >
         <template #item="{ element }">
           <div
-            class="inline-block h-full align-top"
+            class="inline-block align-top"
             data-cy="list-placeholder"
           >
             <ListItem :list="element" />
           </div>
         </template>
       </draggable>
-      <div class="inline-block h-full align-top">
+      <div class="inline-block align-top">
         <ListCreate :board="state.board.id" />
       </div>
     </div>
@@ -113,6 +113,10 @@ const onClickAway = () => {
 </script>
 
 <style lang="postcss" scoped>
+.board-detail {
+  height: calc(100vh - 40px);
+}
+
 .board-title:focus {
   @apply bg-gray1 bg-opacity-100 hover:bg-opacity-100 text-black;
 }

src/components/board/BoardItem.vue

@@ -6,14 +6,15 @@
   >
     <div
       class="board"
+      :id="'board-' + board.id"
       data-cy="board-item"
       @click="navigate"
       @mouseover="showStar = true"
       @mouseout="showStar = false"
     >
-      <h1>
+      <h2>
         {{ board.name }}
-      </h1>
+      </h2>
       <div
         v-show="showStar"
         data-cy="star"
@@ -53,7 +54,7 @@ let showStar = ref(false);
 .star {
   @apply justify-self-end self-start;
 }
-h1 {
+h2 {
   @apply text-white font-bold col-span-5;
 }
 </style>

src/components/boardList/BoardList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid h-screen bg-white background"
+    class="grid h-screen bg-white background board-list"
     data-cy="board-list"
   >
     <!-- LOADING -->
@@ -60,3 +60,8 @@ import Loading from '@/components/Loading.vue';
 const state = useStore();
 state.getBoardList();
 </script>
+<style lang="postcss" scoped>
+.board-list {
+  height: calc(100vh - 40px);
+}
+</style>

src/views/Board.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-blue6">
+  <div class="bg-blue6">
     <CardDetail v-if="cardModule" />
     <BoardDetail />
   </div>