fix: layout improvements (#90)

Author: xbinaryx

src/App.tsx

@@ -48,7 +48,7 @@ function App() {
 								</Panel>
 								<PanelResizeHandle className="w-2 bg-gutter dark:bg-gray-600 bg-gray-200 bg-no-repeat bg-center" />
 								<Panel defaultSize={50} minSize={25}>
-									<div className="bg-muted overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
+									<div className="bg-muted overflow-auto h-full relative flex flex-col">
 										<div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10">
 											<ToolSelector />
 											<div className="flex items-center gap-1">

src/components/ast/css-ast.tsx

@@ -26,7 +26,7 @@ export const CssAst: FC = () => {
 		return (
 			<Accordion
 				type="multiple"
-				className="px-8 font-mono space-y-3 min-w-max"
+				className="px-8 pb-4 font-mono space-y-3 min-w-max"
 				defaultValue={["0-StyleSheet"]}
 			>
 				<CssAstTreeItem

src/components/ast/javascript-ast.tsx

@@ -31,7 +31,7 @@ export const JavascriptAst: FC = () => {
 		return (
 			<Accordion
 				type="multiple"
-				className="px-8 font-mono space-y-3 min-w-max"
+				className="px-8 pb-4 font-mono space-y-3 min-w-max"
 				defaultValue={["0-Program"]}
 			>
 				<JavascriptAstTreeItem

src/components/ast/json-ast.tsx

@@ -26,7 +26,7 @@ export const JsonAst: FC = () => {
 		return (
 			<Accordion
 				type="multiple"
-				className="px-8 font-mono space-y-3 min-w-max"
+				className="px-8 pb-4 font-mono space-y-3 min-w-max"
 				defaultValue={["0-Document"]}
 			>
 				<JsonAstTreeItem

src/components/ast/markdown-ast.tsx

@@ -26,7 +26,7 @@ export const MarkdownAst: FC = () => {
 		return (
 			<Accordion
 				type="multiple"
-				className="px-8 font-mono space-y-3 min-w-max"
+				className="px-8 pb-4 font-mono space-y-3 min-w-max"
 				defaultValue={["0-root"]}
 			>
 				<MarkdownAstTreeItem

src/components/editor.tsx

@@ -131,8 +131,8 @@ export const Editor: FC<EditorProperties> = ({
 	}, [readOnly]);
 
 	const editorClasses = clsx("relative", {
-		"h-[calc(100vh-152px)]": readOnly,
-		"h-[calc(100vh-72px)]": !readOnly,
+		"h-[calc(100%-72px)]": readOnly,
+		"h-[calc(100%-57px)]": !readOnly,
 	});
 
 	const dropMessageClasses = clsx(

src/components/scope/index.tsx

@@ -37,7 +37,7 @@ export const Scope: FC = () => {
 	return (
 		<Accordion
 			type="multiple"
-			className="px-8 font-mono space-y-3 min-w-max"
+			className="px-8 pb-4 font-mono space-y-3 min-w-max"
 			defaultValue={["0-global"]}
 		>
 			{scopeView === "flat" ? (