fix(inspector): tree horitonal scroll, related to #1126

vuejs · May 24, 2021 · 51c7e74 · 51c7e74
1 parent ee6005c
commit 51c7e74
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 22 deletions.
diff --git a/packages/app-frontend/src/features/components/ComponentTreeNode.vue b/packages/app-frontend/src/features/components/ComponentTreeNode.vue
@@ -72,7 +72,7 @@ export default defineComponent({
         scrollIntoView(el, {
           scrollMode: 'if-needed',
           block: 'center',
-          inline: 'center',
+          inline: 'nearest',
           behavior: 'smooth'
         })
       }
@@ -98,10 +98,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <div class="min-w-max">
     <div
       ref="toggleEl"
-      class="font-mono cursor-pointer relative overflow-hidden z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm selectable-item"
+      class="font-mono cursor-pointer relative z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm selectable-item"
       :class="{
         selected,
         'opacity-50': instance.inactive,

diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue
@@ -58,7 +58,7 @@ export default defineComponent({
         scrollIntoView(el, {
           scrollMode: 'if-needed',
           block: 'center',
-          inline: 'center',
+          inline: 'nearest',
           behavior: 'smooth'
         })
       }
@@ -79,10 +79,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <div class="min-w-max">
     <div
       ref="toggleEl"
-      class="font-mono cursor-pointer relative overflow-hidden z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm selectable-item"
+      class="font-mono cursor-pointer relative z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm selectable-item"
       :class="{
         selected
       }"

diff --git a/packages/shared-utils/src/util.ts b/packages/shared-utils/src/util.ts
@@ -593,22 +593,6 @@ export function has (object, path, parent = false) {
   return object != null && Object.prototype.hasOwnProperty.call(object, sections[0])
 }
 
-export function scrollIntoView (scrollParent, el, center = true) {
-  const parentTop = scrollParent.scrollTop
-  const parentHeight = scrollParent.offsetHeight
-  const elBounds = el.getBoundingClientRect()
-  const parentBounds = scrollParent.getBoundingClientRect()
-  const top = elBounds.top - parentBounds.top + scrollParent.scrollTop
-  const height = el.offsetHeight
-  if (center) {
-    scrollParent.scrollTop = top + (height - parentHeight) / 2
-  } else if (top < parentTop) {
-    scrollParent.scrollTop = top
-  } else if (top + height > parentTop + parentHeight) {
-    scrollParent.scrollTop = top - parentHeight + height
-  }
-}
-
 export function focusInput (el) {
   el.focus()
   el.setSelectionRange(0, el.value.length)