fix(playground-tabs): show arrows on long list (#3009)

Author: thetaPC

src/components/global/Playground/index.tsx

@@ -417,7 +417,7 @@ export default function Playground({
         return null;
       }
       return (
-        <PlaygroundTabs className="playground__tabs">
+        <PlaygroundTabs groupId={usageTarget} className="playground__tabs">
           {Object.keys(codeSnippets[usageTarget]).map((fileName) => (
             <TabItem
               className="playground__tab-item"

src/components/global/PlaygroundTabs/index.tsx

@@ -108,7 +108,7 @@ function TabsComponent(props: Props): JSX.Element {
   useEffect(() => {
     setLeftNavVisible(tabsNavEl.current?.scrollLeft > 40);
     setRightNavVisible(tabsNavEl.current?.scrollWidth > tabsNavEl.current?.offsetWidth);
-  }, []);
+  }, [groupId]);
 
   /**
    * If the selected value is not in the available tabs, fall back to the first tab.