From 14e1427cb0f8f77aff623b72fd55490486086892 Mon Sep 17 00:00:00 2001
From: Max Schmeling <max.schmeling@automattic.com>
Date: Sat, 14 Dec 2024 13:39:39 -0600
Subject: [PATCH] Fix text alignment in data source list (#245)

---
 src/data-sources/DataSourceList.tsx | 12 +++++++-----
 src/settings/index.scss             |  4 ++++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/data-sources/DataSourceList.tsx b/src/data-sources/DataSourceList.tsx
index 9218ee69..6e7c1ad5 100644
--- a/src/data-sources/DataSourceList.tsx
+++ b/src/data-sources/DataSourceList.tsx
@@ -163,11 +163,13 @@ const DataSourceList = () => {
 								return (
 									<tr key={ uuid } className="table-row">
 										<td>
-											<Icon
-												icon={ getServiceIcon( service ) }
-												style={ { marginRight: '16px', verticalAlign: 'text-bottom' } }
-											/>
-											<Text className="data-source-display_name">{ displayName }</Text>
+											<div className="rdb-data-source-name-and-icon">
+												<Icon
+													icon={ getServiceIcon( service ) }
+													style={ { marginRight: '16px', verticalAlign: 'text-bottom' } }
+												/>
+												<Text className="data-source-display_name">{ displayName }</Text>
+											</div>
 										</td>
 										<td>
 											<Text>{ getServiceLabel( service ) }</Text>
diff --git a/src/settings/index.scss b/src/settings/index.scss
index b2e16829..d05a59db 100644
--- a/src/settings/index.scss
+++ b/src/settings/index.scss
@@ -171,3 +171,7 @@ body {
 
 }
 
+.rdb-data-source-name-and-icon {
+	display: flex;
+	align-items: center;
+}