[UBER-129] Fix list scroll (#3334)

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

packages/ui/src/components/Scroller.svelte

@@ -473,7 +473,7 @@
       }}
       class="scroll relative flex-shrink"
       style:overflow-x={horizontal ? 'auto' : 'hidden'}
-      on:scroll={(evt) => {
+      on:scroll={() => {
         if ($tooltipstore.label !== undefined) closeTooltip()
       }}
     >

plugins/view-resources/src/components/list/List.svelte

@@ -148,6 +148,7 @@
     on:select-prev={(evt) => {
       select(-2, evt.detail)
     }}
+    on:collapsed
   />
 </div>
 

plugins/view-resources/src/components/list/ListCategories.svelte

@@ -319,6 +319,7 @@
         index: e.detail.index + getInitIndex(categories, i)
       })
     }}
+    on:collapsed
     {flatHeaders}
     {disableHeader}
     {props}

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -390,6 +390,7 @@
               $focusStore = { provider: $focusStore.provider }
             }
           }
+          dispatch('collapsed', { div })
         }
         localStorage.setItem(categoryCollapseKey, collapsed ? 'true' : 'false')
       }}
@@ -460,11 +461,6 @@
 </div>
 
 <style lang="scss">
-  .expandCollapse {
-    overflow: hidden;
-    transition: height 0.3s ease-out;
-    height: auto;
-  }
   .zero-container {
     border-radius: 0.25rem;
 

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -198,7 +198,6 @@
 
 <style lang="scss">
   .categoryHeader {
-    position: relative;
     position: sticky;
     top: 0;
     padding: 0 2.5rem 0 0.75rem;

plugins/view-resources/src/components/list/ListView.svelte

@@ -22,6 +22,8 @@
   export let props: Record<string, any> = {}
 
   let list: List
+  let scroll: Scroller
+  let divScroll: HTMLDivElement
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
     if (dir === 'vertical') {
@@ -43,6 +45,8 @@
 
 <div class="w-full h-full py-4 clear-mins">
   <Scroller
+    bind:this={scroll}
+    bind:divScroll
     fade={{ multipler: { top: 2.75 * viewOptions.groupBy.length, bottom: 0 } }}
     padding={'0 1rem'}
     noFade
@@ -69,8 +73,13 @@
       on:check={(event) => {
         listProvider.updateSelection(event.detail.docs, event.detail.value)
       }}
-      on:content={(evt) => {
-        listProvider.update(evt.detail)
+      on:content={(event) => {
+        listProvider.update(event.detail)
+      }}
+      on:collapsed={(event) => {
+        if (divScroll.getBoundingClientRect().top > event.detail.div.getBoundingClientRect().top) {
+          event.detail.div.scrollIntoView(true)
+        }
       }}
     />
   </Scroller>