Fixes mobile to use document as container for scrolling (#223)

* Uses intersectionObserver instead

* Use intersectionObserver

* Updates mods

* Adds title when more than one container is active

* Updates logic to use native scrolling when only one logger view is open

* Fixes broken test

* Uses close instead of closed

* Fixes scrollingParent

assets/App.vue

@@ -7,19 +7,14 @@
       </pane>
       <pane :size="isMobile ? 100 : 100 - settings.menuWidth" min-size="10">
         <splitpanes>
-          <pane>
+          <pane class="has-min-height">
             <search></search>
             <router-view></router-view>
           </pane>
-          <pane v-for="other in activeContainers" :key="other.id">
+          <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
             <scrollable-view>
               <template v-slot:header>
-                <div class="name columns is-marginless">
-                  <span class="column">{{ other.name }}</span>
-                  <span class="column is-narrow">
-                    <button class="delete is-medium" @click="removeActiveContainer(other)"></button>
-                  </span>
-                </div>
+                <container-title :value="other.name" closable @close="removeActiveContainer(other)"></container-title>
               </template>
               <log-viewer-with-source :id="other.id"></log-viewer-with-source>
             </scrollable-view>
@@ -39,6 +34,7 @@ import ScrollableView from "./components/ScrollableView";
 import SideMenu from "./components/SideMenu";
 import MobileMenu from "./components/MobileMenu";
 import Search from "./components/Search";
+import ContainerTitle from "./components/ContainerTitle";
 
 export default {
   name: "App",
@@ -49,7 +45,8 @@ export default {
     ScrollableView,
     Splitpanes,
     Pane,
-    Search
+    Search,
+    ContainerTitle
   },
   data() {
     return {
@@ -86,13 +83,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.name {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(0, 0, 0, 0.1);
-  font-weight: bold;
-  font-family: monospace;
-}
-
 ::v-deep .splitpanes__splitter {
   min-width: 4px;
   background: #666;
@@ -104,4 +94,8 @@ export default {
 .button.has-no-border {
   border-color: transparent !important;
 }
+
+.has-min-height {
+  min-height: 100vh;
+}
 </style>