update styling:

frontend/src/components/common/DataTable.vue

@@ -3,7 +3,7 @@
 	<div
 		v-if="hasFilters"
 		:key="`filter-controls-${tableName}`"
-		class="filter-controls-panel mb-3 p-3 bg-light rounded"
+		class="filter-controls-panel mb-3 p-3 bg-light rounded custom-data-table"
 	>
 		<div class="row g-3 align-items-end">
 			<div v-for="col in filterableColumns" :key="col.fieldName" class="col-md-4 col-lg-3">
@@ -716,4 +716,8 @@ defineExpose({
 	getPaginationInfo: () => paginationStore.getPageInfo(props.tableName),
 });
 </script>
-<style lang=""></style>
+<style lang="css">
+/* .custom-data-table {
+	height: 100%;
+} */
+</style>

frontend/src/components/modals/CreateClientModal.vue

@@ -110,17 +110,15 @@ const formFields = computed(() => [
 	{
 		name: "customerName",
 		label: "Client Name",
-		type: "autocomplete", // Changed from 'select' to 'autocomplete'
+		type: "autocomplete",
 		required: true,
 		placeholder: "Type or select client name",
 		cols: 12,
 		md: 6,
-		options: customerNames.value, // Direct array of strings
+		options: customerNames.value,
 		forceSelection: false, // Allow custom entries not in the list
 		dropdown: true,
-		// For string arrays, don't set optionLabel at all
 		helpText: "Select an existing client or enter a new client name",
-		// Let the Form component handle filtering automatically
 	},
 	{
 		name: "addressLine1",

frontend/src/components/pages/Clients.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="page-container">
 		<H2>Client Contact List</H2>
 		<div id="filter-container" class="filter-container">
 			<button @click="onClick" id="add-customer-button" class="interaction-button">
@@ -199,4 +199,8 @@ onMounted(async () => {
 	});
 });
 </script>
-<style lang="css"></style>
+<style lang="css">
+.page-container {
+	height: 100%;
+}
+</style>