From 8c02d29a74b4265539973d074ef75f582d7b3019 Mon Sep 17 00:00:00 2001
From: Jacob Lamont <cob@jacoblamont.com>
Date: Mon, 25 Nov 2024 22:37:40 -0500
Subject: [PATCH 1/3] [Dialog]: change position of action buttons right aligned

---
 src/components/dialog/dialog.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog/dialog.svelte b/src/components/dialog/dialog.svelte
index 35474ed6d..f9464e825 100644
--- a/src/components/dialog/dialog.svelte
+++ b/src/components/dialog/dialog.svelte
@@ -261,7 +261,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: stretch;
+    justify-content: end;
     gap: var(--leo-spacing-xl);
   }
 

From 558281c054f0955f5d193d0ba641e9924fe0bf75 Mon Sep 17 00:00:00 2001
From: Jacob Lamont <cob@jacoblamont.com>
Date: Mon, 25 Nov 2024 22:37:12 -0500
Subject: [PATCH 2/3] [Dialog]: **BREAKING** replace 'size' property with media
 query

---
 src/components/dialog/dialog.svelte | 55 +++++++++++++++++------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/dialog/dialog.svelte b/src/components/dialog/dialog.svelte
index f9464e825..840fabefd 100644
--- a/src/components/dialog/dialog.svelte
+++ b/src/components/dialog/dialog.svelte
@@ -4,14 +4,11 @@
   import Button from '../button/button.svelte'
   import Icon from '../icon/icon.svelte'
 
-  type DialogSizes = 'mobile' | 'normal'
-
   type $$Props = Omit<Partial<SvelteHTMLElements['dialog']>, 'open'> & {
     isOpen?: boolean
     modal?: boolean
     showClose?: boolean
     showBack?: boolean
-    size?: DialogSizes
     escapeCloses?: boolean
     backdropClickCloses?: boolean
     animate?: boolean
@@ -23,7 +20,6 @@
   export let modal = true
   export let showClose = false
   export let showBack = false
-  export let size: DialogSizes = 'normal'
   export let escapeCloses = true
   export let backdropClickCloses = true
   export let animate = true
@@ -49,7 +45,6 @@
     transition:scale={{ duration: animate ? 60 : 0, start: 0.8 }}
     {...$$restProps}
     class="leo-dialog"
-    class:mobile={size === 'mobile'}
     class:modal
     class:hasHeader
     class:hasActions={$$slots.actions}
@@ -122,7 +117,7 @@
 
 <style lang="scss">
   .leo-dialog {
-    --padding: var(--leo-dialog-padding, var(--leo-spacing-4xl));
+    --padding: var(--leo-dialog-padding, var(--leo-spacing-2xl));
     --border-radius: var(--leo-dialog-border-radius, var(--leo-radius-xl));
     --background: var(
       --leo-dialog-background,
@@ -141,8 +136,8 @@
     border: none;
     display: grid;
 
-    width: var(--leo-dialog-width, 500px);
-    max-width: calc(100% - var(--leo-spacing-m) * 2);
+    width: calc(100% - var(--leo-spacing-m) * 2);
+    max-width: var(--leo-dialog-width, 374px);
 
     border-radius: var(--border-radius);
 
@@ -176,11 +171,6 @@
     grid-template-rows: auto 1fr auto;
   }
 
-  .leo-dialog.mobile {
-    --padding: var(--leo-dialog-padding, var(--leo-spacing-2xl));
-    width: var(--leo-dialog-width, 374px);
-  }
-
   .leo-dialog:not(.modal) {
     box-shadow: var(--leo-effect-elevation-04);
     border: 1px solid var(--leo-color-divider-subtle);
@@ -249,20 +239,21 @@
     *
     * The :global selector doesn't seem to be able to handle nesting, so we have
     * two separate selectors for mobile & non-mobile layouts */
-  :global .leo-dialog.mobile .actions ::slotted(*),
-  :global .leo-dialog.mobile .actions [slot='actions']:not(:empty) {
+  :global .leo-dialog .actions ::slotted(*),
+  :global .leo-dialog .actions [slot='actions']:not(:empty) {
+    display: flex;
+    gap: var(--leo-spacing-xl);
     flex-direction: column;
     align-items: stretch;
     justify-content: end;
   }
 
-  :global .leo-dialog .actions ::slotted(*),
-  :global .leo-dialog [slot='actions']:not(:empty) {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: end;
-    gap: var(--leo-spacing-xl);
+  @media (orientation: portrait) {
+    :global .leo-dialog .actions ::slotted(*),
+    :global .leo-dialog .actions div[slot='actions'] {
+      flex-direction: column;
+      align-items: stretch;
+    }
   }
 
   .leo-dialog .title-row {
@@ -272,4 +263,24 @@
     justify-content: stretch;
     gap: var(--leo-spacing-l);
   }
+
+  @media (min-width: 375px) and (min-height: 375px) {
+    .leo-dialog {
+      --padding: var(--leo-dialog-padding, var(--leo-spacing-4xl));
+      max-width: var(--leo-dialog-width, 500px);
+    }
+
+    :global .leo-dialog .actions ::slotted(*),
+    :global .leo-dialog [slot='actions']:not(:empty) {
+      flex-direction: row;
+      align-items: center;
+      justify-content: end;
+    }
+  }
+
+  @media (orientation: landscape) {
+    .leo-dialog {
+      max-width: var(--leo-dialog-width, 520px);
+    }
+  }
 </style>

From 638bb377629a14c297c3c2049e2645b11474ccf0 Mon Sep 17 00:00:00 2001
From: Jacob Lamont <cob@jacoblamont.com>
Date: Thu, 5 Dec 2024 20:53:30 -0500
Subject: [PATCH 3/3] [Dialog]: scroll entire dialog instead of just .body

---
 src/components/dialog/dialog.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog.svelte b/src/components/dialog/dialog.svelte
index 840fabefd..c4a7d3658 100644
--- a/src/components/dialog/dialog.svelte
+++ b/src/components/dialog/dialog.svelte
@@ -154,7 +154,7 @@
   }
 
   .leo-dialog.hasHeader {
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto;
   }
 
   /** Since Svelte 4 doesn't support conditional slots in the consumer,
@@ -163,12 +163,12 @@
    * case the selector with :host. */
   :host .leo-dialog.hasActions,
   .leo-dialog.hasActions:has([slot='actions']:not(:empty)) {
-    grid-template-rows: 1fr auto;
+    grid-template-rows: auto auto;
   }
 
   :host .leo-dialog.hasHeader.hasActions,
   .leo-dialog.hasHeader.hasActions:has(.actions [slot='actions']:not(:empty)) {
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: auto auto auto;
   }
 
   .leo-dialog:not(.modal) {
@@ -209,7 +209,6 @@
   }
 
   .leo-dialog .body {
-    overflow-y: auto;
     background: var(--background);
     color: var(--leo-color-text-secondary);
     font: var(--leo-font-default-regular);