playground: make file view scrollable

This commit is contained in:
Moritz Hölting 2024-08-15 21:41:29 +02:00
parent 75aebd9156
commit 86c21ed9ff
4 changed files with 27 additions and 4 deletions

View File

@ -68,6 +68,7 @@ export default defineConfig({
components: { components: {
PageTitle: "./src/components/override/PageTitle.astro", PageTitle: "./src/components/override/PageTitle.astro",
ContentPanel: "./src/components/override/ContentPanel.astro", ContentPanel: "./src/components/override/ContentPanel.astro",
Pagination: "./src/components/override/Pagination.astro",
}, },
sidebar: [ sidebar: [
{ {

View File

@ -0,0 +1,10 @@
---
import type { Props } from "@astrojs/starlight/props";
import Default from "@astrojs/starlight/components/Pagination.astro";
import { isPlaygroundPage } from '@utils/playground';
const isPlayground = isPlaygroundPage(Astro.props.slug, Astro.currentLocale);
---
{isPlayground ? <></> : <Default {...Astro.props}><slot /></Default>}

View File

@ -1,6 +1,6 @@
.playground { .playground {
display: grid; display: grid;
grid-template-columns: clamp(100px, 15%, 400px) auto; grid-template-columns: clamp(200px, 15%, 500px) auto;
grid-template-areas: grid-template-areas:
"header header" "header header"
"files editor"; "files editor";
@ -14,13 +14,18 @@
flex-direction: column; flex-direction: column;
margin-right: 0.5cm; margin-right: 0.5cm;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: hidden;
max-height: 70vh;
> h3 { > h3 {
cursor: pointer; cursor: pointer;
} }
.entries { .entries {
overflow-y: auto;
overflow-x: hidden;
word-wrap: break-word;
button { button {
border: none; border: none;
width: 100%; width: 100%;
@ -41,6 +46,10 @@
} }
> .editor { > .editor {
grid-area: editor; grid-area: editor;
.monaco-editor {
padding-block: 10px;
}
} }
} }
@ -53,7 +62,7 @@
--red: #ff0000; --red: #ff0000;
--cyan: #00d6d6; --cyan: #00d6d6;
code { code {
white-space: break-spaces; white-space: break-spaces;
font-family: monospace; font-family: monospace;
@ -63,7 +72,7 @@
:root[data-theme="light"] { :root[data-theme="light"] {
.error-terminal-display { .error-terminal-display {
background-color: lightgray; background-color: lightgray;
--red: #ff3f3f; --red: #ff3f3f;
--cyan: #00a6a6; --cyan: #00a6a6;
--black: lightgray; --black: lightgray;

View File

@ -6,6 +6,9 @@ edition = "2021"
[lib] [lib]
crate-type = ["cdylib"] crate-type = ["cdylib"]
[profile.release]
opt-level = "s"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies] [dependencies]