From 21a400d4659f82d7e7ab1bde8c68a815fc8306d4 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Mon, 26 Sep 2022 14:13:59 +0000
Subject: [PATCH 1/2] Update 3 files

---
 sandpack-react/src/components/FileExplorer/File.tsx      | 9 ++++++++-
 .../src/components/FileExplorer/FileExplorer.stories.tsx | 1 +
 sandpack-react/src/styles/shared.ts                      | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/sandpack-react/src/components/FileExplorer/File.tsx b/sandpack-react/src/components/FileExplorer/File.tsx
index f8ab04247..29565dabc 100644
--- a/sandpack-react/src/components/FileExplorer/File.tsx
+++ b/sandpack-react/src/components/FileExplorer/File.tsx
@@ -12,6 +12,12 @@ const explorerClassName = css({
   padding: 0,
   marginBottom: "$space$2",
 
+  span: {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+  },
+
   svg: {
     marginRight: "$space$1",
   },
@@ -61,10 +67,11 @@ export const File: React.FC<Props> = ({
       data-active={active}
       onClick={onClickButton}
       style={{ paddingLeft: 18 * depth + "px" }}
+      title={fileName}
       type="button"
     >
       {getIcon()}
-      {fileName}
+      <span>{fileName}</span>
     </button>
   );
 };
diff --git a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx
index 8d581b6cd..07e421588 100644
--- a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx
+++ b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx
@@ -40,6 +40,7 @@ export const Component: React.FC = () => (
         "/index.tsx": "",
         "/src/app.tsx": "",
         "/src/components/button.tsx": "",
+        "/src/components/really-loooooooong-naaameeee.tsx": "",
       }}
       theme="dark"
     >
diff --git a/sandpack-react/src/styles/shared.ts b/sandpack-react/src/styles/shared.ts
index c58822c4a..6a99b42bd 100644
--- a/sandpack-react/src/styles/shared.ts
+++ b/sandpack-react/src/styles/shared.ts
@@ -24,6 +24,7 @@ export const buttonClassName = css({
   '&[data-active="true"]': { color: "$colors$accent" },
 
   svg: {
+    minWidth: "$space$4",
     width: "$space$4",
     height: "$space$4",
   },

From dd3532f45bab286e492e524d91da03fb7c69601a Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Mon, 26 Sep 2022 14:42:59 +0000
Subject: [PATCH 2/2] Update Sandpack.test.tsx

---
 sandpack-react/src/presets/Sandpack.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sandpack-react/src/presets/Sandpack.test.tsx b/sandpack-react/src/presets/Sandpack.test.tsx
index e075dac15..7ee03e575 100644
--- a/sandpack-react/src/presets/Sandpack.test.tsx
+++ b/sandpack-react/src/presets/Sandpack.test.tsx
@@ -33,7 +33,7 @@ describe("getSandpackCssText", () => {
       </SandpackProvider>
     );
 
-    expect(getSandpackCssText().length).toBe(4315);
+    expect(getSandpackCssText().length).toBe(4343);
     expect(getSandpackCssText()).not.toContain(componentClassName);
   });