Fix text alignment in data source list (#245)

Automattic · Dec 14, 2024 · 14e1427 · 14e1427
1 parent 88864b5
commit 14e1427
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -171,3 +171,7 @@ body {
 
 }
 
+.rdb-data-source-name-and-icon {
+	display: flex;
+	align-items: center;
+}