fixed-height modals

Author: hatemhosny

src/livecodes/UI/import.ts

@@ -271,6 +271,6 @@ export const createImportUI = ({
     showScreen('open');
   });
 
-  modal.show(importContainer, { isAsync: true, autoFocus: false });
+  modal.show(importContainer, { isAsync: true, autoFocus: false, size: 'large-fixed' });
   getUrlImportInput(importContainer).focus();
 };

src/livecodes/core.ts

@@ -3301,7 +3301,7 @@ const handleNew = () => {
 
     loadUserTemplates();
     requestAnimationFrame(() => UI.getStarterTemplatesTab(templatesContainer)?.click());
-    modal.show(templatesContainer, { isAsync: true });
+    modal.show(templatesContainer, { isAsync: true, size: 'large-fixed' });
   };
 
   eventsManager.addEventListener(

src/livecodes/models.ts

@@ -1,7 +1,7 @@
 export type * from '../sdk/models';
 
 export interface ModalOptions {
-  size?: 'large' | 'small' | 'full';
+  size?: 'large' | 'small' | 'full' | 'large-fixed';
   closeButton?: boolean;
   isAsync?: boolean;
   onClose?: () => void;

src/livecodes/styles/inc-modal.scss

@@ -64,6 +64,10 @@
     min-height: 60vh;
   }
 
+  &.large-fixed {
+    height: 85vh;
+  }
+
   #modal-container {
     height: 100%;
     margin-top: 2rem;