WIP

APP/src/app/features/members/components/member-form-dialog/member-form-dialog.component.html

@@ -5,7 +5,8 @@
       <!-- TAB 1: Basic Info -->
       <kendo-tabstrip-tab title="Basic Info" [selected]="true">
         <ng-template kendoTabContent>
-          <div class="k-form k-form-horizontal k-mt-4">
+          <div class="k-form k-form-vertical k-mt-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
 
             <kendo-formfield>
               <kendo-label text="Legal First Name *"></kendo-label>
@@ -17,7 +18,7 @@
               <kendo-textbox formControlName="lastName_en"></kendo-textbox>
             </kendo-formfield>
 
-            <kendo-formfield>
+            <kendo-formfield class="md:col-span-2">
               <kendo-label text="Nick Name (Common Name)"></kendo-label>
               <kendo-textbox formControlName="nickName" placeholder="e.g. Chris"></kendo-textbox>
             </kendo-formfield>
@@ -63,6 +64,7 @@
               </kendo-dropdownlist>
             </kendo-formfield>
 
+            </div>
           </div>
         </ng-template>
       </kendo-tabstrip-tab>
@@ -70,9 +72,10 @@
       <!-- TAB 2: Contact -->
       <kendo-tabstrip-tab title="Contact">
         <ng-template kendoTabContent>
-          <div class="k-form k-form-horizontal k-mt-4">
+          <div class="k-form k-form-vertical k-mt-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
 
-            <kendo-formfield>
+            <kendo-formfield class="md:col-span-2">
               <kendo-label text="Email"></kendo-label>
               <kendo-textbox formControlName="email"></kendo-textbox>
             </kendo-formfield>
@@ -87,7 +90,7 @@
               <kendo-textbox formControlName="phoneHome"></kendo-textbox>
             </kendo-formfield>
 
-            <kendo-formfield>
+            <kendo-formfield class="md:col-span-2">
               <kendo-label text="Address"></kendo-label>
               <kendo-textbox formControlName="address"></kendo-textbox>
             </kendo-formfield>
@@ -112,6 +115,7 @@
               <kendo-textbox formControlName="country"></kendo-textbox>
             </kendo-formfield>
 
+            </div>
           </div>
         </ng-template>
       </kendo-tabstrip-tab>
@@ -119,7 +123,8 @@
       <!-- TAB 3: Church Info -->
       <kendo-tabstrip-tab title="Church Info">
         <ng-template kendoTabContent>
-          <div class="k-form k-form-horizontal k-mt-4">
+          <div class="k-form k-form-vertical k-mt-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
 
             <kendo-formfield>
               <kendo-label text="Join Date"></kendo-label>
@@ -131,16 +136,17 @@
               <kendo-datepicker formControlName="baptismDate"></kendo-datepicker>
             </kendo-formfield>
 
-            <kendo-formfield>
+            <kendo-formfield class="md:col-span-2">
               <kendo-label text="Baptism Church"></kendo-label>
               <kendo-textbox formControlName="baptismChurch"></kendo-textbox>
             </kendo-formfield>
 
-            <kendo-formfield>
+            <kendo-formfield class="md:col-span-2">
               <kendo-label text="Notes"></kendo-label>
               <kendo-textarea formControlName="notes" [rows]="4"></kendo-textarea>
             </kendo-formfield>
 
+            </div>
           </div>
         </ng-template>
       </kendo-tabstrip-tab>