Styling changes to increase reactivity of CRM UI.

frontend/src/components/clientSubPages/AddressInformationForm.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="form-section">
-		<h3>Address Information</h3>
+		<h3>Property Address Information</h3>
 		<div class="form-grid">
 			<div class="form-field full-width">
 				<label for="address-line1"> Address Line 1 <span class="required">*</span> </label>
@@ -151,8 +151,9 @@ const handleZipcodeInput = async (event) => {
 }
 
 .form-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
 	gap: 1rem;
 }
 

frontend/src/components/clientSubPages/ContactInformationForm.vue

@@ -11,14 +11,30 @@
 			>
 				<div class="contact-header">
 					<h4>Contact {{ index + 1 }}</h4>
-					<Button
-						v-if="localFormData.contacts.length > 1"
-						@click="removeContact(index)"
-						size="small"
-						severity="danger"
-						label="Delete"
-						class="remove-btn"
-					/>
+					<div class="interactables">
+						<div class="form-field header-row">
+							<input
+								type="checkbox"
+								class="contact-checkbox"
+								:id="`check-${index}`"
+								v-model="contact.isPrimary"
+								label="Primary Contact"
+								:disabled="isSubmitting"
+								@change="setPrimary(index)"
+							/>
+							<label :for="`checkbox-${index}`">
+								Primary Contact
+							</label>
+						</div>
+						<Button
+							v-if="localFormData.contacts.length > 1"
+							@click="removeContact(index)"
+							size="small"
+							severity="danger"
+							label="Delete"
+							class="remove-btn"
+						/>
+					</div>
 				</div>
 				<div class="form-rows">
 					<div class="form-row">
@@ -84,14 +100,6 @@
 								@keydown="handlePhoneKeydown($event, index)"
 							/>
 						</div>
-						<div class="form-field">
-							<v-checkbox
-								v-model="contact.isPrimary"
-								label="Primary Contact"
-								:disabled="isSubmitting"
-								@change="setPrimary(index)"
-							/>
-						</div>
 					</div>
 				</div>
 			</div>
@@ -287,6 +295,7 @@ defineExpose({});
 	padding: 1rem;
 	margin-bottom: 1rem;
 	background: var(--surface-section);
+	min-width: 33%;
 }
 
 .contact-header {
@@ -303,13 +312,19 @@ defineExpose({});
 	font-weight: 600;
 }
 
+.interactables {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	gap: 1rem;
+}
+
 .remove-btn {
 	margin-left: auto;
 }
 
 .contact-item .form-grid {
-	display: grid;
-	grid-template-columns: 1fr;
+	display: flex;
 	gap: 1rem;
 }
 
@@ -320,7 +335,7 @@ defineExpose({});
 }
 
 .form-row {
-	display: grid;
+	display: flex;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 1rem;
 }
@@ -341,6 +356,15 @@ defineExpose({});
 	font-size: 0.9rem;
 }
 
+.form-field.header-row {
+	flex-direction: row;
+	align-items: baseline;
+}
+
+.contact-checkbox {
+	margin-top: 0px;
+}
+
 .required {
 	color: var(--red-500);
 }

frontend/src/components/clientSubPages/Overview.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="overview-container">
-		<template v-if="!editMode">
+		<template v-if="!editMode && !isNew">
 			<Button
 				@click="toggleEditMode"
 				icon="pi pi-pencil"
@@ -713,8 +713,8 @@ const handleCancel = () => {
 }
 
 .status-cards {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	display: flex;
+	flex-wrap: wrap;
 	gap: 1rem;
 }