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); +}