From 5e4b8f0eafcc02320b7d8192c9340450a240fd40 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 31 Jul 2024 09:27:10 +0200
Subject: [PATCH] fix: quick fix for shadowDom issue in dialog

---
 apps/demo-app/src/styles.css                  |  1 -
 .../components/dialog/dialog.component.css    | 27 +++++++++++++------
 .../components/dialog/dialog.component.html   |  7 +++--
 .../lib/components/dialog/dialog.component.ts |  2 --
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/apps/demo-app/src/styles.css b/apps/demo-app/src/styles.css
index 9b25288..3f74c04 100644
--- a/apps/demo-app/src/styles.css
+++ b/apps/demo-app/src/styles.css
@@ -16,7 +16,6 @@
 * {
   padding: 0;
   margin: 0;
-  box-sizing: border-box;
 }
 
 html,
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 8adb9ce..6cf58dd 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -15,15 +15,22 @@
   --sk-dialog-backdrop-blur: 0;
 }
 
+.display-flex {
+  display: flex;
+}
+
 .sk-dialog {
-  width: var(--sk-dialog-width);
-  height: var(--sk-dialog-height);
+  width: 100vw;
+  height: 100vh;
   max-width: 100%;
   max-height: 100%;
   padding: 0;
   border: none;
   outline: none;
   background-color: transparent;
+  position: relative;
+  align-items: center;
+  justify-content: center;
 }
 
 .sk-dialog:has(::backdrop) {
@@ -59,16 +66,13 @@
   right: auto;
 }
 
-.sk-dialog-fullscreen-dialog {
-  height: 100%;
-}
-
 .sk-dialog-wrapper {
   position: relative;
   display: flex;
+  inset: auto;
   margin: var(--sk-dialog-margin);
-  height: calc(100% - (var(--sk-dialog-margin) * 2));
-  max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
+  width: var(--sk-dialog-width);
+  height: var(--sk-dialog-height);
 }
 
 .sk-dialog-content-container {
@@ -102,3 +106,10 @@
       (var(--sk-dialog-container-padding) * 2)
   );
 }
+
+.sk-dialog-fullscreen-dialog {
+  height: calc(100% - (var(--sk-dialog-margin) * 2));
+  max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
+  width: calc(100% - (var(--sk-dialog-margin) * 2));
+  max-width: calc(100svw - (var(--sk-dialog-margin) * 2));
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 05f9932..5a6a1e6 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -4,9 +4,12 @@
   skClickBackdrop
   (clickedBackdrop)="close.emit()"
   (keydown.escape)="close.emit()"
-  [ngClass]="{ 'sk-dialog-fullscreen-dialog': fullscreen() }"
+  [class.display-flex]="open()"
 >
-  <div class="sk-dialog-wrapper">
+  <div
+    class="sk-dialog-wrapper"
+    [ngClass]="{ 'sk-dialog-fullscreen-dialog': fullscreen() }"
+  >
     @if (showCloseButton()) {
     <div
       class="sk-dialog-close-button"
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 57ea5c2..cfb7819 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -5,7 +5,6 @@ import {
   output,
   viewChild,
   model,
-  ViewEncapsulation,
   untracked,
   ElementRef,
 } from '@angular/core';
@@ -23,7 +22,6 @@ export enum CloseButtonPosition {
   imports: [ClickBackdropDirective, NgClass],
   templateUrl: './dialog.component.html',
   styleUrl: './dialog.component.css',
-  encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class DialogComponent {
   readonly open = model(false);