From cb509b044ff9cdcbdc3513e83e6e9102a9b30bc8 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 22 Jun 2023 11:40:46 -0700
Subject: [PATCH] fix(playground-tabs): show arrows on long list

---
 src/components/global/Playground/index.tsx     | 2 +-
 src/components/global/PlaygroundTabs/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 9e01b1902bb..0681230b851 100644
--- a/src/components/global/Playground/index.tsx
+++ b/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"
diff --git a/src/components/global/PlaygroundTabs/index.tsx b/src/components/global/PlaygroundTabs/index.tsx
index 73d958c5681..69efd4fbe7b 100644
--- a/src/components/global/PlaygroundTabs/index.tsx
+++ b/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.