[client] scroll added requests into view

src/client/components/app/RequestSequence/RequestSequence.tsx

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, PropType, VNode } from 'vue'
-import { defineComponent, onUpdated, ref, TransitionGroup } from 'vue'
+import { defineComponent, ref, TransitionGroup, watch } from 'vue'
 import { VList, VListItem } from '../../core'
 import { useRequestStore } from '../../../stores/request'
 import type { ProxyRequestInfo } from '../../../../shared/Request'
@@ -22,11 +22,7 @@ export const RequestSequence = defineComponent({
     const handleSelect = (item: ProxyRequestInfo) => {
       emit('update:modelValue', item)
     }
-    onUpdated(() => {
-      const el = list.value?.$el
-      if (!el || !el.$el) return
-      el.$el.lastChild.scrollIntoView()
-    })
+    watch(requestStore.ids, () => list.value?.$el?.lastElementChild?.scrollIntoView())
     return () => (
       <VList class={['fill-height', 'overflow-auto', 'mt-2']} ref={list}>
         <TransitionGroup>
@@ -49,7 +45,7 @@ export const RequestSequence = defineComponent({
                     ]}
                     prependIcon={'InputCircle'}
                   >
-                    <div class={['no-wrap', 'overflow-hidden', 'overflow-ellipsis']}>
+                    <div class={['no-wrap', 'overflow-hidden', 'overflow-ellipsis']} title={`${req.method} — ${req.url}`}>
                       {req.method} — {req.url}
                     </div>
                   </VListItem>