From 2b1bc26b7d092b3622a29e412be736e51a8ceb10 Mon Sep 17 00:00:00 2001
From: Agata <a.j.dobrowolska@gmail.com>
Date: Tue, 12 Nov 2024 11:24:14 +0100
Subject: [PATCH] vertical spacing between the bottom buttons and the content

---
 .../src/components/modal/modal-buttons.tsx    |  2 ++
 .../src/components/modal/style.module.css     | 27 ++-----------------
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/packages/playground/website/src/components/modal/modal-buttons.tsx b/packages/playground/website/src/components/modal/modal-buttons.tsx
index 221fd66e5c..073f1f47ca 100644
--- a/packages/playground/website/src/components/modal/modal-buttons.tsx
+++ b/packages/playground/website/src/components/modal/modal-buttons.tsx
@@ -1,5 +1,6 @@
 import { Button, Flex } from '@wordpress/components';
 import React from 'react';
+import css from './style.module.css';
 
 interface ModalButtonsProps {
 	submitText?: string;
@@ -12,6 +13,7 @@ export default function ModalButtons({ submitText = 'Submit', areDisabled = fals
 	return (
 		<Flex
 			justify={'end'}
+			className={css.modalButtons}
 		>
 			<Button
 				isBusy={areBusy}
diff --git a/packages/playground/website/src/components/modal/style.module.css b/packages/playground/website/src/components/modal/style.module.css
index c56fb9c9af..7542c80e43 100644
--- a/packages/playground/website/src/components/modal/style.module.css
+++ b/packages/playground/website/src/components/modal/style.module.css
@@ -11,29 +11,6 @@
 	max-width: 350px;
 }
 
-.btn {
-	cursor: pointer;
-	background: none;
-	border: none;
-}
-
-.btn:hover,
-.btn:active {
-	opacity: 0.8;
-}
-
-.btn-close {
-	position: absolute;
-	right: -12px;
-}
-
-.modal-header {
-	position: relative;
-	padding-bottom: 15px;
-}
-
-.modal-inner {
-	position: relative;
-	text-align: left;
-	max-height: 90vh;
+.modal-buttons {
+	margin-top: 1.5rem;
 }