diff --git a/src/data-sources/DataSourceSettings.scss b/src/data-sources/DataSourceSettings.scss
index 3582e071..47fd3e7e 100644
--- a/src/data-sources/DataSourceSettings.scss
+++ b/src/data-sources/DataSourceSettings.scss
@@ -79,7 +79,6 @@
 
 
 .rdb-settings-page_data-source-form {
-	overflow-y: auto;
 	padding: 0 16px 40px;
 
 	@media screen and (min-width: 782px) {
@@ -233,6 +232,11 @@
 	}
 }
 
+.components-form-token-field__input-container > div:first-child {
+	max-height: 220px;
+	overflow-y: scroll;
+}
+
 .components-form-token-field__input-container.is-active {
 	position: relative;
 }
diff --git a/src/data-sources/airtable/AirtableSettings.tsx b/src/data-sources/airtable/AirtableSettings.tsx
index c86b8da7..74c7aae8 100644
--- a/src/data-sources/airtable/AirtableSettings.tsx
+++ b/src/data-sources/airtable/AirtableSettings.tsx
@@ -1,6 +1,6 @@
 import { SelectControl } from '@wordpress/components';
 import { InputChangeCallback } from '@wordpress/components/build-types/input-control/types';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { ChangeEvent } from 'react';
 
@@ -132,6 +132,13 @@ export const AirtableSettings = ( {
 		}
 	};
 
+	// if the selected table changes, reset the fields
+	useEffect( () => {
+		if ( currentTableId !== state.tables?.[ 0 ]?.id ) {
+			setTableFields( [] );
+		}
+	}, [ currentTableId ] );
+
 	let connectionMessage: React.ReactNode = (
 		<span>
 			<a href="https://support.airtable.com/docs/creating-personal-access-tokens" target="_label">