fix(file-explorer): trim and avoid shrinks the icon on long file names (

#578)
codesandbox · Sep 26, 2022 · bc12d03 · bc12d03
1 parent 121cf65
commit bc12d03
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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/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);
   });
 

diff --git 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",
   },