From 89a6be28d5b6cec45169adc356dd15705c2ea109 Mon Sep 17 00:00:00 2001
From: shubhamsharma9199 <shubham.24bcs10320@sst.scaler.com>
Date: Mon, 24 Nov 2025 13:52:43 +0530
Subject: [PATCH] refactor(templates): align view template page with consistent
 UI pattern

Replaced deprecated word-wrap with modern overflow-wrap: break-word
---
 .../view-template.component.html              | 28 +++++-------
 .../view-template.component.scss              | 44 ++++++++++++++++---
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/app/templates/view-template/view-template.component.html b/src/app/templates/view-template/view-template.component.html
index efb077ee2c..9806e77458 100644
--- a/src/app/templates/view-template/view-template.component.html
+++ b/src/app/templates/view-template/view-template.component.html
@@ -1,23 +1,22 @@
-<div class="container m-b-20 layout-row align-end gap-20px">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TEMPLATE'">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Edit' | translate }}
-  </button>
-
-  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_TEMPLATE'">
-    <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Delete' | translate }}
-  </button>
-</div>
-
 <div class="container">
+  <div class="layout-row align-end gap-10px m-b-20">
+    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TEMPLATE'">
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Edit' | translate }}
+    </button>
+
+    <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_TEMPLATE'">
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Delete' | translate }}
+    </button>
+  </div>
+
   <mat-card>
     <mat-card-content>
       <div class="layout-row-wrap">
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.name' | translate }}
         </div>
-
         <div class="flex-50">
           {{ templateData.name }}
         </div>
@@ -25,7 +24,6 @@
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Entity' | translate }}
         </div>
-
         <div class="flex-50">
           {{ templateData.entity }}
         </div>
@@ -33,7 +31,6 @@
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Type' | translate }}
         </div>
-
         <div class="flex-50">
           {{ templateData.type }}
         </div>
@@ -41,7 +38,6 @@
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Text' | translate }}
         </div>
-
         <div class="flex-50" [innerHTML]="templateData.text"></div>
       </div>
     </mat-card-content>
diff --git a/src/app/templates/view-template/view-template.component.scss b/src/app/templates/view-template/view-template.component.scss
index 46cf447600..1970b9aa22 100644
--- a/src/app/templates/view-template/view-template.component.scss
+++ b/src/app/templates/view-template/view-template.component.scss
@@ -1,10 +1,44 @@
+// Component-specific styles - minimal overrides to global styles
+// Follows existing patterns from general-tab components
+
 .container {
-  max-width: 37rem;
+  max-width: 32rem;
+  margin: 0 auto;
+  width: 85%;
+}
+
+mat-card {
+  mat-card-content {
+    padding: 1.5rem;
+
+    .layout-row-wrap {
+      display: grid;
+      grid-template-columns: 50% 50%;
+
+      @media (width <= 768px) {
+        grid-template-columns: 100%;
+      }
+    }
+
+    .flex-50 {
+      padding: 0.625rem 0;
+      display: flex;
+      align-items: center;
+      font-size: 0.875rem;
+      overflow-wrap: break-word;
+      line-height: 1.6;
+
+      &.mat-body-strong {
+        font-weight: 600;
+      }
+
+      &:not(:last-child, :nth-last-child(2)) {
+        border-bottom: 1px solid #ddd;
+      }
+    }
 
-  .content {
-    div {
-      margin: 1rem 0;
-      word-wrap: break-word;
+    @media (width <= 480px) {
+      padding: 1rem;
     }
   }
 }