chore: Add panel-dialog.scss for customizing panel dialog width

restorecommerce · Jul 15, 2024 · 146bb43 · 146bb43
1 parent 365439b
commit 146bb43
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/packages/modules/management/src/lib/components/iam/iam-create.component.ts b/packages/modules/management/src/lib/components/iam/iam-create.component.ts
@@ -34,7 +34,7 @@ import { JssFormService } from './services';
         <vcl-panel-dialog
           [showCloseButton]="true"
           (close)="tplLayer.close()"
-          style="min-width: 420px;"
+          class="panel-dialog"
         >
           <vcl-panel-title>{{ title }}</vcl-panel-title>
           <div class="row">

diff --git a/packages/modules/management/src/lib/components/iam/iam-edit.component.ts b/packages/modules/management/src/lib/components/iam/iam-edit.component.ts
@@ -43,7 +43,7 @@ import { JssFormService } from './services';
         <vcl-panel-dialog
           [showCloseButton]="true"
           (close)="tplLayer.close()"
-          style="min-width: 420px;"
+          class="panel-dialog"
         >
           <vcl-panel-title>{{ title }}</vcl-panel-title>
           <div class="row">

diff --git a/packages/modules/ui/src/lib/styles/index.scss b/packages/modules/ui/src/lib/styles/index.scss
@@ -5,6 +5,7 @@
 @use './forms.scss';
 @use './orders.scss';
 @use './page.scss';
+@use './panel-dialog.scss';
 @use './products.scss';
 @use './toolbar.scss';
 @use './public.scss';

diff --git a/packages/modules/ui/src/lib/styles/panel-dialog.scss b/packages/modules/ui/src/lib/styles/panel-dialog.scss
@@ -0,0 +1,11 @@
+.panel-dialog {
+  width: 700px;
+
+  @media (max-width: 767px) {
+    width: 600px;
+  }
+
+  @media (max-width: 430px) {
+    width: 400px;
+  }
+}