[monaco] improve height resize, loading state (#911)

instantdb · Feb 20, 2025 · daa051d · daa051d
1 parent 713d7b7
commit daa051d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/client/www/components/dash/Perms.tsx b/client/www/components/dash/Perms.tsx
@@ -27,8 +27,8 @@ export function Perms({
   }, [app]);
 
   return (
-    <div className="flex flex-1 flex-col md:flex-row">
-      <div className="flex flex-col gap-4 border-r p-4 text-sm md:basis-96 md:text-base">
+    <div className="flex flex-1 flex-col md:flex-row min-h-0">
+      <div className="flex flex-col gap-4 border-r p-4 text-sm md:basis-96 md:text-base min-h-0">
         <SectionHeading>Permissions</SectionHeading>
         <Content>
           <p>

diff --git a/client/www/components/ui.tsx b/client/www/components/ui.tsx
@@ -866,6 +866,7 @@ export function CodeEditor(props: {
       }}
       onMount={props.onMount}
       beforeMount={(monaco) => {}}
+      loading={<FullscreenLoading />}
     />
   );
 }
@@ -883,12 +884,12 @@ export function JSONEditor(props: {
   }, [props.value]);
 
   return (
-    <div className="flex flex-col gap-2 h-full">
+    <div className="flex flex-col gap-2 h-full min-h-0">
       <div className="flex items-center gap-4 border-b px-4 py-2">
         <div className="font-mono">{props.label}</div>
         <Button onClick={() => props.onSave(draft)}>Save</Button>
       </div>
-      <div className="flex-grow">
+      <div className="flex-grow min-h-0">
         <CodeEditor
           language="json"
           value={props.value}