fix: fixes to the nodelink viewport resizing and database forms

apps/web/src/components/navbar/AddDatabaseForm/newdatabaseform.tsx

@@ -77,7 +77,7 @@ export const NewDatabaseForm = (props: { onClose(): void; open: boolean }) => {
   return (
     <dialog ref={ref}>
       <form
-        className="card flex gap-4"
+        className="card flex gap-4 p-5 rounded-sm shadow-lg"
         onSubmit={(event: React.FormEvent) => {
           event.preventDefault();
           handleSubmitClicked();
@@ -237,34 +237,17 @@ export const NewDatabaseForm = (props: { onClose(): void; open: boolean }) => {
 
         <div className="card-actions w-full justify-center">
           <button className={`btn btn-primary ${Object.values(hasError).some((e) => e === true) ? 'btn-disabled' : ''}`}>Submit</button>
-          <button className="btn btn-outline" onClick={() => props.onClose()}>
+          <button
+            className="btn btn-outline"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              props.onClose();
+            }}
+          >
             Cancel
           </button>
         </div>
-        {/* 
-          
-            <div className={styles.loginContainerButton}>
-              {portValidation && portValidation == 'error' ? (
-                <Button disabled variant="contained" type="submit" color="success">
-                  Submit
-                </Button>
-              ) : (
-                <Button variant="contained" type="submit" color="success">
-                  Submit
-                </Button>
-              )}
-  
-              <Button
-                className={styles.cancelButton}
-                variant="outlined"
-                color="error"
-                onClick={() => {
-                  props.onClose();
-                }}
-              >
-                Cancel
-              </Button>
-            </div> */}
       </form>
     </dialog>
   );

libs/shared/lib/vis/nodelink/components/NLPixi.tsx

@@ -43,11 +43,23 @@ export const NLPixi = (props: Props) => {
   //   app.render();
   // }, [props.windowSize]);
 
+  function resize() {
+    const width = ref?.current?.clientWidth || 1000;
+    const height = ref?.current?.clientHeight || 1000;
+    app.renderer.resize(width, height);
+    if (viewport.current) {
+      viewport.current.screenWidth = width;
+      viewport.current.worldWidth = width;
+      viewport.current.worldHeight = height;
+      viewport.current.screenHeight = height;
+    }
+    app.render();
+  }
+
   useEffect(() => {
     if (!ref.current) return;
     const resizeObserver = new ResizeObserver(() => {
-      app.renderer.resize(ref?.current?.clientWidth || 1000, ref?.current?.clientHeight || 1000);
-      app.render();
+      resize();
     });
     resizeObserver.observe(ref.current);
     return () => resizeObserver.disconnect(); // clean up
@@ -56,8 +68,7 @@ export const NLPixi = (props: Props) => {
   useEffect(() => {
     if (ref.current && ref.current.children.length === 0) {
       ref.current.appendChild(app.view as HTMLCanvasElement);
-      app.renderer.resize(ref?.current?.clientWidth || 1000, ref?.current?.clientHeight || 1000);
-      app.render();
+      resize();
     }
   }, [ref]);