fix: marvinjs-modal-layout

moleculemaker · Feb 16, 2024 · 3c9f7f1 · 3c9f7f1
1 parent 6153525
commit 3c9f7f1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -129,7 +129,7 @@ header {
             position: absolute;
             right: 0px;
             top: -($padding);
-            z-index: get_index(modal);
+            z-index: get_index(modal) + 1;
 
             width: 30rem;
 

diff --git a/src/app/components/chemscraper/results/results.component.html b/src/app/components/chemscraper/results/results.component.html
@@ -251,9 +251,9 @@ <h3>Right Sidebar</h3>
         </ng-container>
     </div>
 
-  <p-dialog *ngIf="showMarvinJsEditor" [(visible)]="showMarvinJsEditor" [modal]="true" [style]="{ width: '50vw', height: '50vh' }" [draggable]="false" [resizable]="false">
+  <p-dialog *ngIf="showMarvinJsEditor" class="marvin-editor-container" [(visible)]="showMarvinJsEditor" [modal]="true" [draggable]="false" [resizable]="false">
     <!--<app-molecule-drawing-canvas></app-molecule-drawing-canvas>-->
-    <app-marvin-js-editor [(smiles)]="marvinJsSmiles"></app-marvin-js-editor>
+    <app-marvin-js-editor class="marvin-editor" [(smiles)]="marvinJsSmiles"></app-marvin-js-editor>
     <ng-template pTemplate="footer">
       <p-button icon="pi pi-check" (click)="searchStructure()" label="Search Structure" styleClass="p-button-primary"></p-button>
     </ng-template>

diff --git a/src/app/components/chemscraper/results/results.component.scss b/src/app/components/chemscraper/results/results.component.scss
@@ -655,6 +655,34 @@ p-panel {
   }
 }
 
+.marvin-editor-container {
+  z-index: get_index(modal) !important;
+
+  ::ng-deep .p-dialog {
+    $editor_min_width: 617.5px;
+    $editor_min_height: 650px;
+    height: 50vh;
+    width: 50vw;
+    min-width: $editor_min_width;
+    min-height: $editor_min_height;
+
+    @media (width <= $editor_min_width) {
+      width: 100vw;
+      min-width: 0px;
+    }
+
+    @media (height <= $editor_min_height) {
+      height: 100vh;
+      min-height: 0px;
+    }
+  }
+
+  .marvin-editor {
+    display: block;
+    height: 100%;
+  }
+}
+
 .table-controls-overlay{
   padding: 12px;
 }