From 978a62a6b32268897fb00cb3883607d98a2c9757 Mon Sep 17 00:00:00 2001
From: Shubham Kumar <shubham.24bcs10320@sst.scaler.com>
Date: Wed, 24 Dec 2025 03:37:51 +0530
Subject: [PATCH] improve spacing and margins on create savings account form
 (#2929)

---
 .../create-savings-account.component.scss     | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/src/app/savings/create-savings-account/create-savings-account.component.scss b/src/app/savings/create-savings-account/create-savings-account.component.scss
index e69de29bb..a833ca348 100644
--- a/src/app/savings/create-savings-account/create-savings-account.component.scss
+++ b/src/app/savings/create-savings-account/create-savings-account.component.scss
@@ -0,0 +1,69 @@
+// Container styling with proper spacing and margins
+.container {
+  margin: 1.5rem auto;
+  max-width: 75rem;
+  width: 100%;
+  padding: 0 1.5rem;
+  box-sizing: border-box;
+}
+
+// Material Stepper styling with proper spacing
+:host ::ng-deep mat-stepper {
+  background: transparent;
+
+  .mat-step-header {
+    padding: 1rem 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .mat-step-content {
+    padding: 1.5rem;
+    margin: 1rem 0;
+  }
+}
+
+// Form field spacing within steps
+:host ::ng-deep mat-step-content {
+  mat-form-field {
+    margin-bottom: 1rem;
+    width: 100%;
+  }
+
+  .layout-row-wrap {
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+}
+
+// Responsive design
+@media (width <= 768px) {
+  .container {
+    padding: 0 1rem;
+    margin: 1rem auto;
+  }
+
+  :host ::ng-deep mat-stepper {
+    .mat-step-content {
+      padding: 1rem;
+      margin: 0.75rem 0;
+    }
+
+    .mat-step-header {
+      padding: 0.75rem 1rem;
+    }
+  }
+}
+
+@media (width <= 480px) {
+  .container {
+    padding: 0 0.75rem;
+    margin: 0.75rem auto;
+  }
+
+  :host ::ng-deep mat-stepper {
+    .mat-step-content {
+      padding: 0.75rem;
+      margin: 0.5rem 0;
+    }
+  }
+}