From 350617c5d37df939da2b637f377559ac6afa7c4b Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Wed, 20 Sep 2023 19:03:02 +0200
Subject: [PATCH] feat: Improve diagram cache margins on mobile phones

The diagram overview and diagram viewer makes now full use
of the available space on mobile phones.
As the previous way to close the diagram by just pressing next to it
it not available anymore (there are no margins),
there is a new sticky close button on mobile phones.

The UI on devices with wider screens (>=1024px) doesn't change.
---
 .../model-diagram-dialog.component.html              |  4 ++++
 .../model-diagram-dialog.component.ts                | 12 ++++++++++--
 .../model-overview/model-overview.component.ts       | 11 +++++++++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
index 738e21b83..9713eaea7 100644
--- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
+++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
@@ -117,4 +117,8 @@ <h2>View diagrams</h2>
   >
     No diagrams for the given filter found. Please remove your search query.
   </div>
+  <div class="w-full md:hidden sticky bottom-0 bg-white">
+    <mat-divider id="bottom-divider"></mat-divider>
+    <button class="w-full" mat-button mat-dialog-close>Close</button>
+  </div>
 </div>
diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
index 12afa122e..f0dd41d27 100644
--- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
+++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
@@ -130,8 +130,16 @@ export class ModelDiagramDialogComponent {
     const loadingDiagram = this.diagrams[diagram.uuid];
     if (!loadingDiagram.loading) {
       this.dialog.open(ModelDiagramPreviewDialogComponent, {
-        height: '80vh',
-        width: '80vw',
+        maxWidth: '100vw',
+        panelClass: [
+          'md:w-[85vw]',
+          'md:h-[85vw]',
+          'md:max-h-[85vh]',
+          'max-h-full',
+          'w-full',
+          'h-full',
+          '!max-w-full',
+        ],
         data: {
           diagram: diagram,
           content: loadingDiagram.content,
diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
index d3a067aef..8f539e1a1 100644
--- a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
+++ b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
@@ -62,8 +62,15 @@ export class ModelOverviewComponent implements OnInit {
 
   openDiagramsDialog(model: Model): void {
     this.dialog.open(ModelDiagramDialogComponent, {
-      height: '80vh',
-      width: '80vw',
+      maxWidth: '100vw',
+      panelClass: [
+        'md:w-[85vw]',
+        'md:h-[85vw]',
+        'md:max-h-[85vh]',
+        'max-h-full',
+        'w-full',
+        'h-full',
+      ],
       data: { modelSlug: model.slug, projectSlug: this.projectSlug },
     });
   }