fix(dialog): footer alignment and width for small resolution

Endava · Jun 28, 2023 · eed2f96 · eed2f96
1 parent f5d8f37
commit eed2f96
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -221,7 +221,7 @@ export class BqDialog {
   render() {
     return (
       <dialog class={`bq-dialog ${this.size}`} ref={(dialogElem) => (this.dialogElem = dialogElem)} part="dialog">
-        <main class="flex flex-col gap-[var(--bq-dialog--title-body-gap)]" part="content">
+        <main class="flex flex-col gap-[var(--bq-dialog--title-body-gap)] overflow-hidden" part="content">
           <header class="bq-dialog--header" part="header">
             <div class="bq-dialog--title flex flex-1 items-center justify-between" part="title">
               <slot name="title" />

diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -18,19 +18,21 @@
   @apply absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform flex-col gap-[var(--bq-dialog--content-footer-gap)] p-0;
   @apply rounded-[var(--bq-dialog--border-radius)] bg-[var(--bq-dialog--background)] shadow-[shadow:var(--bq-dialog--box-shadow)];
   @apply opacity-0 transition-opacity duration-300 ease-in-out;
+  // If mobile resolution, dialog will be full width
+  @apply w-[90vw];
 
   border: var(--bq-dialog--border-width) var(--bq-dialog--border-style) var(--bq-dialog--border-color);
 
   &.small {
-    @apply w-[var(--bq-dialog--width-small)];
+    @apply sm:w-[var(--bq-dialog--width-small)];
   }
 
   &.medium {
-    @apply w-[var(--bq-dialog--width-medium)];
+    @apply sm:w-[var(--bq-dialog--width-medium)];
   }
 
   &.large {
-    @apply w-[var(--bq-dialog--width-large)];
+    @apply sm:w-[var(--bq-dialog--width-large)];
   }
 }
 
@@ -57,7 +59,7 @@
 /* ------------------------------ Dialog footer ----------------------------- */
 
 .bq-dialog--footer {
-  @apply sticky bottom-0 flex w-full items-center justify-end gap-xs p-[var(--bq-dialog--padding)] pt-0;
+  @apply sticky top-full flex w-full items-center justify-end gap-xs p-[var(--bq-dialog--padding)] pt-0;
 }
 
 /* --------------------------- Dialog close button -------------------------- */