WEB-470 Edit Button Placement Inconsistent on Office Edit Page

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -1,3 +1,15 @@
+<div class="office-card-wrapper">
+  <div class="card-header">
+    <span class="card-title">
+      {{ 'labels.heading.General' | translate }}
+    </span>
+  </div>
+
+  <div class="tab-container mat-typography compact-view">
+    <div class="layout-row-wrap responsive-column compact-details condensed">...</div>
+  </div>
+</div>
+
 <div class="tab-container mat-typography compact-view">
   <div class="layout-row-wrap responsive-column compact-details condensed">
     <div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Parent Office' | translate }}</div>
@@ -26,12 +38,4 @@
       {{ 'labels.inputs.Unassigned' | translate }}
     </div>
   </div>
-
-  <div class="bottom-button-container small-buttons">
-    <span *mifosxHasPermission="'UPDATE_OFFICE'">
-      <button mat-raised-button color="primary" [routerLink]="['../edit']" class="edit-button">
-        <fa-icon icon="edit" class="m-r-5"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-      </button>
-    </span>
-  </div>
 </div>

src/app/organization/offices/view-office/general-tab/general-tab.component.scss

@@ -1,3 +1,20 @@
+.office-card-wrapper {
+  max-width: 450px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0.75rem 0.25rem;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
 .tab-container {
   padding: 0.5rem;
   margin: 1% auto;

src/app/organization/offices/view-office/view-office.component.html

@@ -1,4 +1,17 @@
 <div class="container narrow-container extra-small">
+  <div class="action-bar">
+    <button
+      mat-raised-button
+      color="primary"
+      class="edit-button"
+      [routerLink]="['./edit']"
+      *mifosxHasPermission="'UPDATE_OFFICE'"
+    >
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Edit' | translate }}
+    </button>
+  </div>
+
   <mat-card class="office-card">
     <mat-card-content class="card-content">
       <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">

src/app/organization/offices/view-office/view-office.component.scss

@@ -21,7 +21,6 @@
   .navigation-tabs {
     overflow: auto;
     padding: 0.2rem 0;
-    scrollbar-width: thin;
 
     &::-webkit-scrollbar {
       height: 4px;
@@ -72,3 +71,31 @@
 .tab-panel {
   padding: 0.5rem 0;
 }
+
+.action-bar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto 0.5rem;
+  padding: 0 0.5rem;
+}
+
+.edit-button {
+  min-width: 110px;
+  padding: 0.4rem 1rem;
+  font-size: 0.95rem;
+}
+
+.tab-header-with-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0.5rem 0.5rem 0;
+  margin-bottom: 0.5rem;
+}
+
+.tab-actions {
+  display: flex;
+  gap: 0.5rem;
+}