From f01ea7e2ef840201275d799c26fa8da47ed82106 Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Sun, 12 Sep 2021 12:39:39 +0800
Subject: [PATCH] Make the icons line up

---
 web/docs/about.mdx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/docs/about.mdx b/web/docs/about.mdx
index edd7c62dc0b..e1dbc681aee 100755
--- a/web/docs/about.mdx
+++ b/web/docs/about.mdx
@@ -10,10 +10,11 @@ import Link from '@docusaurus/Link'
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 const frameworks = [
-  { 
-    name: 'Angular', 
-    logo: '/img/libraries/angular-icon.svg', 
-    href: '/docs/guides/with-angular' },
+  {
+    name: 'Angular',
+    logo: '/img/libraries/angular-icon.svg',
+    href: '/docs/guides/with-angular',
+  },
   {
     name: 'Expo',
     logo: '/img/libraries/expo-icon.svg',
@@ -87,8 +88,10 @@ Supabase is just Postgres, which makes it compatible with a large number of tool
     {frameworks.map((x) => (
       <div key={x.name} class="col col--3">
         <Link class="card" to={x.href}>
-          <div class="card__body" style={{ display: 'flex', gap: 20 }}>
-            {x.logo && <img src={x.logo} alt={x.name} width="20" height="20"/>}
+          <div class="card__body" style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
+            {x.logo && (
+              <img src={x.logo} alt={x.name} width="20" style={{ display: 'block', maxHeight: 20 }} />
+            )}
             <p>{x.name}</p>
           </div>
         </Link>