Scroll hidden chips into view on select

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

src/pages/detect.vue

@@ -29,6 +29,7 @@
       <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
         <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
           :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
+          :id="(result.resultIndex == selectedChip) ? 'selected_chip' : ''"
           :text="result.label"
           media=" "
           :tooltip="result.confidence.toFixed(1)"
@@ -371,6 +372,10 @@
         imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
         this.selectedChip = iChip
         this.resultData.detections[iChip].beenViewed = true
+
+        this.$nextTick( () => {
+          document.getElementById('selected_chip').scrollIntoView({behavior: 'smooth', block: 'nearest'})
+        })
       },
       deleteChip ( iChip ) {
         f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {