feat(playground): Use full height for right side panels
MODIFY
website/playground/src/DesktopPlayground.tsx
website/playground/src/DesktopPlayground.tsx
@@ -83,25 +83,28 @@ export default function DesktopPlayground({
}, []);
return (
- <div className="divide-y divide-slate-300">
+ <div className="divide-y divide-slate-300 h-screen flex flex-col">
<h1 className="p-4 text-xl">Rome Playground</h1>
<SettingsMenu
settings={settings}
setPlaygroundState={setPlaygroundState}
/>
- <div className="box-border flex h-screen divide-x divide-slate-300">
- <div className="w-1/2 p-5">
+ <div
+ className="box-border flex divide-x divide-slate-300 flex-1 overflow-auto"
+ >
<CodeMirror
value={code}
- height="70vh"
+ className="h-full overflow-y-hidden w-1/2 p-5 h-full"
+ height="100%"
extensions={extensions}
placeholder="Enter your code here"
onUpdate={onUpdate}
onChange={onChange}
/>
- </div>
- <div className="w-1/2 p-5 flex flex-col">
- <Tabs>
+ <Tabs
+ className="w-1/2 p-5 flex flex-col"
+ selectedTabPanelClassName="flex-1 react-tabs__tab-panel--selected overflow-y-auto"
+ >
<TabList>
<Tab selectedClassName="bg-slate-300">Formatter</Tab>
<Tab selectedClassName="bg-slate-300">CST</Tab>
@@ -119,29 +122,36 @@ export default function DesktopPlayground({
</Tab>
</TabList>
<TabPanel>
- <h1>Rome</h1>
+ <div className="h-1/2 flex flex-col pb-4">
+ <h1 className="text-lg font-medium pb-2">Rome</h1>
<CodeMirror
value={formatted_code}
extensions={extensions}
placeholder="Rome Output"
- height="30vh"
+ className="flex-1 overflow-y-auto"
+ height="100%"
readOnly={true}
/>
- <h1>Prettier</h1>
+ </div>
+ <div className="h-1/2 flex flex-col">
+ <h1 className="text-lg font-medium pb-2">Prettier</h1>
<CodeMirror
value={prettierOutput.code}
extensions={extensions}
placeholder="Prettier Output"
- height="30vh"
+ className="flex-1 overflow-y-auto"
+ height="100%"
readOnly={true}
/>
+ </div>
</TabPanel>
<TabPanel><TreeView tree={cst} /></TabPanel>
<TabPanel>
<CodeMirror
value={ast}
extensions={romeAstCodeMirrorExtension}
- height="70vh"
+ className="h-full"
+ height="100%"
readOnly={true}
/>
</TabPanel>
@@ -149,16 +159,23 @@ export default function DesktopPlayground({
<CodeMirror
value={formatter_ir}
extensions={romeFormatterIrCodeMirrorExtension}
- height="70vh"
+ className="h-full"
+ height="100%"
readOnly={true}
/>
</TabPanel>
<TabPanel>
- <pre className="h-screen overflow-scroll">{prettierOutput.ir}</pre>
+ <CodeMirror
+ value={prettierOutput.ir}
+ extensions={romeFormatterIrCodeMirrorExtension}
+ className="h-full"
+ height="100%"
+ readOnly={true}
+ />
</TabPanel>
<TabPanel>
<div
- className="h-screen overflow-scroll whitespace-pre-wrap text-red-500 text-xs error-panel"
+ className="overflow-scroll whitespace-pre-wrap text-red-500 text-xs error-panel h-full"
dangerouslySetInnerHTML={{ __html: errors }}
/>
</TabPanel>
@@ -166,6 +183,5 @@ export default function DesktopPlayground({
</Tabs>
</div>
</div>
- </div>
);
}

MODIFY
website/playground/src/TreeView.tsx
website/playground/src/TreeView.tsx
@@ -3,5 +3,5 @@ interface Props {
}
export default function TreeView({ tree }: Props) {
- return <div className="overflow-scroll"><pre>{tree}</pre></div>;
+ return <div className="overflow-scroll h-full"><pre>{tree}</pre></div>;
}

feat(playground): Use full height for right side panels (#3072)