panel seems to get clipped when dragging up
TheBuilderJR opened this issue · comments
It's quite an interesting bug. It gets clipped when dragging up but then gets unclipped when dragging down.
Here's a video of the bug:
Area.mp4
Here's my code
import Editor from "@monaco-editor/react";
import { Theme, useTheme } from "remix-themes";
import { Button } from "./ui/button";
export default function Component() {
const [theme, setTheme] = useTheme();
const editorTheme = theme === Theme.DARK ? "vs-dark" : "vs-light";
return (
<div className="flex flex-col h-full space-y-1">
<Editor
className="w-full h-full"
defaultLanguage="sql"
defaultValue="SELECT * FROM my_table LIMIT 10;"
theme={editorTheme}
options={{
minimap: {
enabled: false,
},
}}
/>
<div className="flex items-center justify-end mr-3 justify-endspace-x-2">
<Button>Submit</Button>
</div>
</div>
);
}
Please share a full repro that I can run. Partial code isn't enough. The issue could be a bug with your CSS styling.
Sandbox not found
It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.
This is a Flex/CSS overflow issue. You can't reproduce it by resizing the browser window to be shorter without even using this library.
To fix it, add overflow: hidden
to the <section>
element.
perfecto! thank you!
for future readers of this issue, you can simply add the overflow-hidden class on the <Editor component and it'll add it to the section element as @bvaughn suggested