From a4f8febcb3cc3381cadbb72c6cd23e3c54353c32 Mon Sep 17 00:00:00 2001
From: Shubham Kumar <shubham.24bcs10320@sst.scaler.com>
Date: Wed, 24 Sep 2025 21:12:00 +0530
Subject: [PATCH] Fix CSS for Client Screen Report layout (#2679)

---
 .../client-screen-reports.component.html      |  4 +--
 .../client-screen-reports.component.scss      | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
index 7982d6a44..ab9c1a6cc 100644
--- a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
+++ b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
@@ -18,7 +18,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
+      <mat-card-actions class="layout-row align-center gap-5px actions-spacing responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
@@ -30,7 +30,7 @@
   </mat-card>
 </div>
 
-<div #output class="container">
+<div #output class="container m-t-20">
   <mat-card class="layout-column gap-3percent">
     <div class="layout-align-end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
diff --git a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.scss b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.scss
index 7b109a26a..dc37b1993 100644
--- a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.scss
+++ b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.scss
@@ -5,3 +5,34 @@
     align-self: flex-end;
   }
 }
+
+::ng-deep mat-card {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 8px;
+  background-color: var(--card-background, #fff);
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+  height: 10rem;
+}
+
+.m-t-20 button {
+  background-color: #1976d2;
+  color: white;
+}
+
+::ng-deep .container.m-t-20 mat-card p {
+  display: block;
+  margin-top: -1.9rem;
+}
+
+.m-b-20 form {
+  margin-top: -1.5rem;
+}
+
+.actions-spacing {
+  margin-top: 24px;
+}