refactored based on recommendations from PR #295

Author: jspaaks

src/components/ScreenAuthors.vue

@@ -59,6 +59,7 @@ import AuthorCardEditing from 'components/AuthorCardEditing.vue'
 import AuthorCardViewing from 'components/AuthorCardViewing.vue'
 import { AuthorType } from 'src/types'
 import { useCff } from 'src/store/cff'
+import { scrollToBottom } from '../scroll-to-bottom'
 
 export default defineComponent({
     name: 'ScreenAuthors',
@@ -80,9 +81,6 @@ export default defineComponent({
             await nextTick()
             scrollToBottom()
         }
-        const scrollToBottom = () => {
-            document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
-        }
         const removeAuthor = () => {
             const newAuthors = [...authors.value]
             newAuthors.splice(editingId.value, 1)

src/components/ScreenIdentifiers.vue

@@ -61,6 +61,7 @@ import IdentifierCardEditing from 'components/IdentifierCardEditing.vue'
 import IdentifierCardViewing from 'components/IdentifierCardViewing.vue'
 import { IdentifierType, IdentifierTypeType } from 'src/types'
 import { useCff } from 'src/store/cff'
+import { scrollToBottom } from '../scroll-to-bottom'
 
 export default defineComponent({
     name: 'ScreenIdentifiers',
@@ -92,9 +93,6 @@ export default defineComponent({
             setIdentifiers(newIdentifiers)
             editingId.value = -1
         }
-        const scrollToBottom = () => {
-            document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
-        }
         const setIdentifierDescriptionField = (field: keyof IdentifierType, value: string) => {
             const identifier = { ...identifiers.value[editingId.value] }
             identifier.description = value

src/components/ScreenKeywords.vue

@@ -49,6 +49,7 @@ import StepperActions from 'components/StepperActions.vue'
 import Keyword from 'components/Keyword.vue'
 import { defineComponent, nextTick } from 'vue'
 import { useCff } from '../store/cff'
+import { scrollToBottom } from '../scroll-to-bottom'
 
 export default defineComponent({
     name: 'ScreenKeywords',
@@ -59,9 +60,6 @@ export default defineComponent({
     },
     setup () {
         const { keywords, setKeywords } = useCff()
-        const scrollToBottom = () => {
-            document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
-        }
         const addKeyword = async () => {
             const newKeyword = ''
             const newKeywords = [...keywords.value, newKeyword]

src/scroll-to-bottom.ts

@@ -0,0 +1,7 @@
+export const scrollToBottom = (targetClass = 'bottom') => {
+    document.getElementsByClassName(targetClass)[0].scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+        inline: 'end'
+    })
+}