feat(studio): scroll sql editor tabs to end when longer than container width (#42218)

* feat: scroll sql editor tabs to end when longer than container width

* feat: more fine tuned

* feat: code clean up into hook

* chore: run prettier

* fix: remove remnant of old useEffect

apps/studio/components/layouts/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortabl
 import { AnimatePresence, motion } from 'framer-motion'
 import { Plus, X } from 'lucide-react'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 import { useParams } from 'common'
 import { useDashboardHistory } from 'hooks/misc/useDashboardHistory'
@@ -28,6 +29,7 @@ import { useEditorType } from '../editors/EditorsLayout.hooks'
 import { CollapseButton } from './CollapseButton'
 import { SortableTab } from './SortableTab'
 import { TabPreview } from './TabPreview'
+import { useTabsScroll } from './Tabs.utils'
 
 export const EditorTabs = () => {
   const { ref, id } = useParams()
@@ -132,6 +134,8 @@ export const EditorTabs = () => {
     tabs.handleTabNavigation(id, router)
   }
 
+  const { tabsListRef } = useTabsScroll({ activeTab: tabs.activeTab, tabCount: editorTabs.length })
+
   return (
     <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
       <Tabs_Shadcn_
@@ -141,6 +145,7 @@ export const EditorTabs = () => {
       >
         <CollapseButton hideTabs={false} />
         <TabsList_Shadcn_
+          ref={tabsListRef}
           className={cn(
             'rounded-b-none gap-0 h-10 flex items-center w-full z-[1]',
             'bg-surface-200 dark:bg-alternative border-none overflow-clip overflow-x-auto'

apps/studio/components/layouts/Tabs/Tabs.utils.ts

@@ -1,6 +1,6 @@
 import { Entity } from 'data/entity-types/entity-types-infinite-query'
 import useLatest from 'hooks/misc/useLatest'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { createTabId, editorEntityTypes, useTabsStateSnapshot } from 'state/tabs'
 
 export function useTableEditorTabsCleanUp() {
@@ -105,3 +105,51 @@ export function useSqlEditorTabsCleanup() {
     })
   }, [])
 }
+
+interface UseTabsScrollOptions {
+  activeTab: string | null | undefined
+  tabCount: number
+}
+
+export function useTabsScroll({ activeTab, tabCount }: UseTabsScrollOptions) {
+  const tabsListRef = useRef<HTMLDivElement>(null)
+  const prevTabCountRef = useRef<number>(tabCount)
+  const isInitialMount = useRef(true)
+
+  useEffect(() => {
+    if (tabsListRef.current) {
+      tabsListRef.current.scrollLeft = tabsListRef.current.scrollWidth
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false
+      return
+    }
+
+    if (!tabsListRef.current) return
+
+    const tabCountIncreased = tabCount > prevTabCountRef.current
+
+    if (tabCountIncreased) {
+      tabsListRef.current.scrollLeft = tabsListRef.current.scrollWidth
+    } else if (activeTab) {
+      const activeTabElement = tabsListRef.current.querySelector(
+        `[data-state="active"]`
+      ) as HTMLElement
+
+      if (activeTabElement) {
+        activeTabElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }
+
+    prevTabCountRef.current = tabCount
+  }, [activeTab, tabCount])
+
+  return { tabsListRef }
+}