diff --git a/website/docs/src/NestedSandpack.tsx b/website/docs/src/NestedSandpack.tsx
index e1c4497a4..65c78460f 100644
--- a/website/docs/src/NestedSandpack.tsx
+++ b/website/docs/src/NestedSandpack.tsx
@@ -1,4 +1,4 @@
-import { Sandpack } from "./CustomSandpack";
+import { Sandpack, SandpackLayout } from "./CustomSandpack";
import React from "react";
const indexCode = `import React, { StrictMode } from "react";
@@ -41,25 +41,24 @@ export default function App() {
}
`;
return (
-
+
+
+
);
};
diff --git a/website/docs/src/scss/_code.scss b/website/docs/src/scss/_code.scss
index e58b19fa2..c099439b6 100644
--- a/website/docs/src/scss/_code.scss
+++ b/website/docs/src/scss/_code.scss
@@ -19,3 +19,32 @@ code {
--sp-colors-fg-active: #f0fdaf;
display: block;
}
+
+.nestedSandpack > .sp-wrapper > .sp-layout {
+ display: block;
+}
+
+.nestedSandpack > .sp-wrapper > .sp-layout .sp-stack + .sp-stack {
+ height: 400px;
+}
+
+.sp-wrapper *::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+/* Track */
+.sp-wrapper *::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0);
+}
+
+/* Handle */
+.sp-wrapper *::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.15);
+ border-radius: 9999px;
+}
+
+/* Handle on hover */
+.sp-wrapper *::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.3);
+}