merging code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/clients/clients-view/family-members-tab/family-members-tab.component.html

@@ -7,7 +7,6 @@
 -->
 
 <div class="nom-container mat-typography">
-
   <!-- ═══ FAMILY MEMBERS SECTION ═══ -->
   <div class="nom-header">
     <div class="nom-header__left">
@@ -50,7 +49,12 @@
             <button mat-stroked-button color="primary" class="nom-actions__edit" (click)="editFamilyMember(member, i)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon> Edit
             </button>
-            <button mat-stroked-button color="warn" class="nom-actions__delete" (click)="deleteMember(member, 'Family Member')">
+            <button
+              mat-stroked-button
+              color="warn"
+              class="nom-actions__delete"
+              (click)="deleteMember(member, 'Family Member')"
+            >
               <fa-icon icon="trash" class="m-r-10"></fa-icon> Delete
             </button>
           </div>
@@ -91,5 +95,4 @@
       </mat-expansion-panel>
     }
   </mat-accordion>
-
 </div>

src/app/clients/clients-view/family-members-tab/family-members-tab.component.scss

@@ -113,7 +113,7 @@ $orange-light: #fff3e0;
   margin-bottom: 12px !important;
   border-radius: 10px !important;
   border: 1px solid $gray-200 !important;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 6%) !important;
 
   &::ng-deep .mat-expansion-panel-body {
     padding: 0 20px 20px !important;
@@ -224,11 +224,11 @@ $orange-light: #fff3e0;
   border-radius: 8px;
   overflow: hidden;
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media (max-width: 480px) {
+  @media (width <= 480px) {
     grid-template-columns: 1fr;
   }
 }
@@ -263,7 +263,7 @@ $orange-light: #fff3e0;
     word-break: break-word;
 
     &--mono {
-      font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+      font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
       font-size: 13px;
       letter-spacing: 0.5px;
     }

src/app/clients/clients-view/family-members-tab/family-members-tab.component.ts

@@ -80,12 +80,12 @@ export class FamilyMembersTabComponent {
 
   /** Family members (non-nominee entries) */
   get familyMembers(): any[] {
-    return this.clientFamilyMembers.filter(m => !m.nominationType || m.nominationType === '');
+    return this.clientFamilyMembers.filter((m) => !m.nominationType || m.nominationType === '');
   }
 
   /** Nominees (entries with nominationType set) */
   get nominees(): any[] {
-    return this.clientFamilyMembers.filter(m => m.nominationType && m.nominationType !== '');
+    return this.clientFamilyMembers.filter((m) => m.nominationType && m.nominationType !== '');
   }
 
   /** Get relationship display name */

src/app/clients/clients-view/family-members-tab/nominee-dialog/nominee-dialog.component.scss

@@ -44,7 +44,9 @@ $white: #fff;
   height: 32px !important;
   line-height: 32px !important;
   color: $gray-500;
-  transition: color 0.15s ease, background 0.15s ease;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
 
   &:hover {
     color: $gray-900;
@@ -176,7 +178,7 @@ $white: #fff;
 }
 
 // Responsive
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .fd-grid--cols-2 {
     grid-template-columns: 1fr;
   }

src/app/clients/clients-view/family-members-tab/nominee-dialog/nominee-dialog.component.ts

@@ -48,8 +48,14 @@ export class NomineeDialogComponent implements OnInit {
     const member = this.data.member;
     this.nomineeForm = this.formBuilder.group({
       nominationType: [member?.nominationType || 'DA1'],
-      firstName: [member?.firstName || '', Validators.required],
-      relationshipId: [member?.relationshipId || '', Validators.required],
+      firstName: [
+        member?.firstName || '',
+        Validators.required
+      ],
+      relationshipId: [
+        member?.relationshipId || '',
+        Validators.required
+      ],
       dateOfBirth: [member?.dateOfBirth ? this.dateUtils.formatDate(member.dateOfBirth, 'yyyy-MM-dd') : null],
       percentageShare: [member?.percentageShare ?? 100],
       isDependent: [member?.isDependent || false],