Make the logs scroll smoothly

src/components/Combat.vue

@@ -12,6 +12,7 @@
     <div class="statblock-separator statblock-separator-center"></div>
     <div class="statblock-separator statblock-separator-right"></div>
     <div class="log">
+      <div class="log-entry log-filler"></div>
     </div>
     <div class="left-fader">
 
@@ -116,7 +117,8 @@ export default class Combat extends Vue {
       const elements = entry.render()
 
       if (elements.length > 0) {
-        const before = log.querySelector("div.log-entry")
+        const before = log.querySelector("div.log-entry") as HTMLElement|null
+
         const holder = document.createElement("div")
         holder.classList.add("log-entry")
         entry.render().forEach(element => {
@@ -135,7 +137,12 @@ export default class Combat extends Vue {
         log.insertBefore(hline, before)
         log.insertBefore(holder, hline)
 
-        log.scrollTo({ top: 0, left: 0 })
+        // TODO this behaves a bit inconsistent -- sometimes it jerks and doesn't scroll to the top
+        if (log.scrollTop === 0 && before !== null) {
+          log.scrollTo({ top: before.offsetTop, left: 0 })
+        }
+
+        log.scrollTo({ top: 0, left: 0, behavior: "smooth" })
       }
     }
   }
@@ -292,6 +299,7 @@ export default class Combat extends Vue {
 }
 
 .log {
+  position: relative;
   grid-area: main-row-start / main-col-start / main-row-end / main-col-end;
   overflow-y: scroll;
   overflow-x: hidden;
@@ -301,6 +309,11 @@ export default class Combat extends Vue {
   width: 70vw;
   max-width: 1000px;
   align-self: flex-start;
+  height: 100%;
+}
+
+.log-filler {
+  height: 100%;
 }
 
 .left-stats,
@@ -449,6 +462,7 @@ a {
 }
 
 .log > div.log-entry {
+  position: relative;
   color: #888;
   padding-top: 4pt;
   padding-bottom: 4pt;

src/components/Explore.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="explore-layout">
     <div class="explore-log">
-
+      <div class="explore-log-filler"></div>
     </div>
     <div class="explore-worldinfo">
       <p class="worldinfo-date">{{ world.time.format("MMMM Do Y") }}</p>
@@ -68,7 +68,6 @@ export default class Explore extends Vue {
     if (log !== null) {
       const rendered = entry.render()
       if (rendered.length > 0) {
-        const before = log.querySelector("div.explore-log-entry")
         const holder = document.createElement("div")
         holder.classList.add("explore-log-entry")
 
@@ -79,10 +78,10 @@ export default class Explore extends Vue {
         holder.classList.add("explore-entry")
         const hline = document.createElement("div")
         hline.classList.add("explore-log-separator")
-        log.insertBefore(hline, before)
-        log.insertBefore(holder, hline)
+        log.appendChild(hline)
+        log.appendChild(holder)
 
-        log.scrollTo({ top: 0, left: 0 })
+        log.scrollTo({ top: log.scrollHeight, left: 0, behavior: "smooth" })
       }
     }
   }
@@ -129,6 +128,10 @@ export default class Explore extends Vue {
   padding: 8pt;
 }
 
+.explore-log-filler {
+  height: 100%;
+}
+
 .explore-worldinfo {
   grid-area: worldinfo;
   background: #111;
@@ -221,4 +224,8 @@ export default class Explore extends Vue {
     width: 100%;
   }
 }
+
+.explore-log > div:last-child {
+  margin-bottom: 8pt;
+}
 </style>