fix(styles): fix bottom margin for buttons inside <dialog> element when content becomes scrollable (#6414)

## 📄 Description

This PR fixes bottom margin for buttons inside <dialog> element when
content becomes scrollable

## 🚀 Preview link:

[The
Dialog](https://preview-6414--swisspost-design-system-next.netlify.app/?path=/docs/562eac2b-6dc1-4007-ba8e-4e981cef0cbc--docs)

---

## 🔮 Design review

- [ ] Design review done
- [x] No design review needed

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature
works
- ✔️ New and existing unit tests pass locally with my changes

---------

Co-authored-by: Lea <[email protected]>

Author: alionazherdetska

.changeset/eleven-towns-camp.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed bottom margin for buttons inside `<dialog>` element when content becomes scrollable.

packages/styles/src/components/dialog.scss

@@ -75,7 +75,7 @@ dialog {
 }
 
 dialog > .dialog-grid {
-  padding: tokens.get('utility-gap-16');
+  padding: tokens.get('utility-gap-16') tokens.get('utility-gap-16') 0;
   display: grid;
   column-gap: tokens.get('utility-gap-16');
   grid-template-columns: auto 1fr auto;
@@ -86,6 +86,10 @@ dialog > .dialog-grid {
 
   // Propagate bg color to the controls
   background-color: inherit;
+
+  &:not(:has(.dialog-controls)) {
+    padding-bottom: tokens.get('utility-gap-16');
+  }
 }
 
 :where(.dialog-icon, .dialog-header, .dialog-body, .dialog-controls, .dialog-close):empty {
@@ -160,6 +164,8 @@ dialog > .dialog-grid {
   position: sticky;
   bottom: 0;
   padding-top: tokens.get('utility-gap-16');
+  padding-bottom: tokens.get('utility-gap-16');
+  margin-block-end: 0;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;