docs(playground): update layout

This commit is contained in:
Johann Schopplich
2025-11-30 15:26:15 +01:00
parent 236be77c35
commit ef02ebe4c8

View File

@@ -305,20 +305,18 @@ async function loadTokenizer() {
<style scoped> <style scoped>
.playground { .playground {
padding: 32px 24px 96px; padding: 32px 24px 32px;
min-height: 100vh;
background: var(--vp-c-bg);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.playground { .playground {
padding: 48px 32px 128px; padding: 48px 32px 48px;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.playground { .playground {
padding: 48px 32px 0; padding: 48px 32px 48px;
} }
} }
@@ -415,7 +413,6 @@ async function loadTokenizer() {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 16px; gap: 16px;
min-height: 500px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -427,6 +424,7 @@ async function loadTokenizer() {
.editor-pane { .editor-pane {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 500px;
border: 1px solid var(--vp-c-divider); border: 1px solid var(--vp-c-divider);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@@ -434,6 +432,12 @@ async function loadTokenizer() {
transition: border-color 0.25s; transition: border-color 0.25s;
} }
@media (max-width: 768px) {
.editor-pane {
min-height: 400px;
}
}
.editor-pane:focus-within { .editor-pane:focus-within {
border-color: var(--vp-c-brand-1); border-color: var(--vp-c-brand-1);
} }
@@ -583,8 +587,7 @@ async function loadTokenizer() {
.editor-output pre { .editor-output pre {
margin: 0; margin: 0;
white-space: pre-wrap; white-space: pre;
word-break: break-all;
} }
.error-message { .error-message {