From c6b1b9ae61db8c1d25c65dee03fc8d737c75c01b Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Wed, 26 Mar 2025 16:48:08 +0100
Subject: [PATCH] chore: Fix button position and left padding of WDS modal
 (#39941)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Fixes #39767

| Before | After |
|--------|--------|
|<img width="504" alt="Screenshot 2025-03-26 at 15 41 37"
src="https://github.com/user-attachments/assets/3d090b2e-2397-495f-8aea-e97462cc0bed"
/>|<img width="478" alt="Screenshot 2025-03-26 at 15 58 30"
src="https://github.com/user-attachments/assets/bd7d5681-5e71-4ae3-a04c-a00d2b0ad727"
/>|
|<img width="509" alt="Screenshot 2025-03-26 at 15 41 40"
src="https://github.com/user-attachments/assets/7565e6cb-8005-40f7-8771-b0d36be5fa88"
/>|<img width="493" alt="Screenshot 2025-03-26 at 15 58 34"
src="https://github.com/user-attachments/assets/be759205-7f87-490e-8573-30787627074d"
/>|
|<img width="504" alt="Screenshot 2025-03-26 at 15 43 25"
src="https://github.com/user-attachments/assets/ffc3bcb4-cb4e-44d0-854e-641b49e8b92a"
/>|<img width="477" alt="Screenshot 2025-03-26 at 15 55 57"
src="https://github.com/user-attachments/assets/b5a156bc-cecf-4672-8839-ddcd19275ed6"
/>|

## Automation

/ok-to-test tags="@tag.Sanity"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14086541712>
> Commit: 3d64e014ff432460b456471ed9eb3a0041e40754
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14086541712&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Wed, 26 Mar 2025 15:44:12 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Refined the modal's visual layout for enhanced spacing and alignment.
- Adjusted horizontal padding and inter-element gaps in the modal
content.
- Updated header margins and improved button vertical positioning for a
more polished interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/Modal/src/styles.module.css        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css
index 9e80a71f9e..deb772515d 100644
--- a/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css
@@ -14,16 +14,19 @@
   outline: none;
   display: flex;
   flex-direction: column;
-  padding-inline: var(--outer-spacing-4);
+  padding-inline: var(--outer-spacing-5) var(--outer-spacing-4);
   padding-block: var(--outer-spacing-4);
-  gap: var(--outer-spacing-2);
+  gap: var(--outer-spacing-3);
   flex: 1;
 }
 
 .overlay .content .header {
   /* Needed to align the close button */
-  padding-inline: 0 calc(var(--outer-spacing-2));
-  margin-inline: 0 calc(-1 * var(--outer-spacing-4));
+  margin-inline: 0 calc(-0.5 * var(--inner-spacing-3));
+}
+
+.overlay .content .header button {
+  margin-block: calc(-0.5 * var(--inner-spacing-3)) 0;
 }
 
 .overlay .content .body {