From cd2def37491783a491bc04631cbd40346838e0ca Mon Sep 17 00:00:00 2001
From: Julia Hoang <julia.hoang@metalab.com>
Date: Tue, 17 Mar 2026 14:53:38 -0700
Subject: [PATCH 1/2] Fix ID usage in Install Card componenet

---
 static/css/v3/install-card.css                |  43 ++++--
 static/js/install-card.js                     | 143 ++++++++----------
 .../v3/examples/_v3_example_section.html      |   7 +-
 templates/v3/includes/_install_card.html      | 121 +++++++++++----
 .../_install_card_tab_content_body.html       |  27 +++-
 5 files changed, 206 insertions(+), 135 deletions(-)

diff --git a/static/css/v3/install-card.css b/static/css/v3/install-card.css
index 46a26ccb5..1476019fe 100644
--- a/static/css/v3/install-card.css
+++ b/static/css/v3/install-card.css
@@ -3,7 +3,14 @@
   Tabs + dropdown selector + command display for getting-started install instructions.
   Uses CSS radio inputs for tab switching and option selection (no JS required).
   Builds on .card (card.css), .dropdown (forms.css), .code-block (code-block.css).
-  The tabs are styled in tab.css
+  Tabs styled by tab.css.
+
+  Architecture — two levels of radio-driven show/hide:
+    1. Tab radios (.install-card__radio--pkg / --sys) are direct children of <section>.
+       Static :checked ~ sibling rules below toggle .install-card__panel visibility.
+    2. Option radios per tab (e.g. Vcbkg, Conan) are siblings of .code-block inside each panel.
+       Dynamic :checked ~ rules are generated by Django in _install_card.html's
+       inline <style> block because the number of options is data-driven.
 */
 
 .install-card {
@@ -27,22 +34,18 @@
 .install-card__radio:focus-visible
   ~ .install-card__body
   .tab__list
-  [for="install-tab-pkg"],
-.install-card__radio:focus-visible
-  ~ .install-card__body
-  .tab__list
-  [for="install-tab-sys"] {
+  .tab__trigger {
   outline: none;
 }
 
-#install-tab-pkg:focus-visible
+.install-card__radio--pkg:focus-visible
   ~ .install-card__body
   .tab__list
-  [for="install-tab-pkg"],
-#install-tab-sys:focus-visible
+  .tab__trigger:first-child,
+.install-card__radio--sys:focus-visible
   ~ .install-card__body
   .tab__list
-  [for="install-tab-sys"] {
+  .tab__trigger:last-child {
   outline: medium auto -webkit-focus-ring-color;
 }
 
@@ -100,6 +103,10 @@
   border: 1px solid var(--color-surface-strong);
 }
 
+.install-card__dropdown .dropdown__trigger:focus-visible {
+  outline: -webkit-focus-ring-color auto 1px !important;
+}
+
 /* ── details/summary dropdown overrides ───────────────────── */
 .install-card__dropdown summary {
   list-style: none;
@@ -138,22 +145,26 @@
 }
 
 /* Tab panel switching */
-#install-tab-pkg:checked ~ .install-card__body .install-card__panel--pkg {
+.install-card__radio--pkg:checked
+  ~ .install-card__body
+  .install-card__panel--pkg {
   display: block;
 }
-#install-tab-sys:checked ~ .install-card__body .install-card__panel--sys {
+.install-card__radio--sys:checked
+  ~ .install-card__body
+  .install-card__panel--sys {
   display: block;
 }
 
 /* Tab active styling */
-#install-tab-pkg:checked
+.install-card__radio--pkg:checked
   ~ .install-card__body
   .tab__list
-  [for="install-tab-pkg"],
-#install-tab-sys:checked
+  .tab__trigger:first-child,
+.install-card__radio--sys:checked
   ~ .install-card__body
   .tab__list
-  [for="install-tab-sys"] {
+  .tab__trigger:last-child {
   border-bottom-color: var(--color-text-secondary);
   color: var(--color-text-primary);
 }
diff --git a/static/js/install-card.js b/static/js/install-card.js
index 846f376b1..a219bff33 100644
--- a/static/js/install-card.js
+++ b/static/js/install-card.js
@@ -2,106 +2,91 @@
  * Install Card — Keyboard navigation & UX enhancements
  * Core interactions (tabs, dropdown, option selection) work without JS via
  * CSS radio inputs and <details>/<summary>. This script adds:
- *   - Arrow-key navigation between tabs
+ *   - aria-selected sync on tab labels
  *   - Escape to close dropdown
  *   - Enter/Space to select dropdown items
  *   - Auto-close dropdown after option selection
- *   - ARIA attribute updates on state changes
+ *   - aria-selected sync on dropdown items
+ * Supports multiple install cards on the same page via querySelectorAll.
  */
 document.addEventListener("DOMContentLoaded", function () {
-  var card = document.querySelector("[data-install-card]");
-  if (!card) return;
-
-  var tabLabels = card.querySelectorAll('.tab__list [role="tab"]');
-
-  // --- Arrow-key tab navigation ---
-  tabLabels.forEach(function (label) {
-    label.addEventListener("keydown", function (e) {
-      var tabs = Array.from(tabLabels);
-      var idx = tabs.indexOf(label);
-      var target = null;
-
-      if (e.key === "ArrowRight") target = tabs[(idx + 1) % tabs.length];
-      if (e.key === "ArrowLeft")
-        target = tabs[(idx - 1 + tabs.length) % tabs.length];
-
-      if (target) {
-        e.preventDefault();
-        // Check the associated radio to switch tab
-        var radio = document.getElementById(target.getAttribute("for"));
-        if (radio) radio.checked = true;
-        target.focus();
-        updateTabAria();
-      }
-    });
+  document.querySelectorAll("[data-install-card]").forEach(function (card) {
+    initInstallCard(card);
   });
 
-  // --- Tab ARIA updates on radio change ---
-  card.querySelectorAll('input[name="install-tab"]').forEach(function (radio) {
-    radio.addEventListener("change", updateTabAria);
-  });
+  function initInstallCard(card) {
+    var tabLabels = card.querySelectorAll('.tab__list [role="tab"]');
 
-  function updateTabAria() {
-    tabLabels.forEach(function (label) {
-      var radio = document.getElementById(label.getAttribute("for"));
-      var isActive = radio && radio.checked;
-      label.setAttribute("aria-selected", isActive ? "true" : "false");
-      label.setAttribute("tabindex", isActive ? "0" : "-1");
+    // Sync aria-selected on tab labels when tab radio changes
+    card.querySelectorAll("input.install-card__radio").forEach(function (radio) {
+      radio.addEventListener("change", function () {
+        tabLabels.forEach(function (label) {
+          var r = document.getElementById(label.getAttribute("for"));
+          label.setAttribute("aria-selected", r && r.checked ? "true" : "false");
+        });
+      });
     });
-  }
 
-  // Set initial ARIA state
-  updateTabAria();
+    // --- Dropdown enhancements per panel ---
+    card.querySelectorAll(".install-card__panel").forEach(function (panel) {
+      var details = panel.querySelector("details.install-card__dropdown");
+      if (!details) return;
 
-  // --- Dropdown enhancements per panel ---
-  card.querySelectorAll(".install-card__panel").forEach(function (panel) {
-    var details = panel.querySelector("details.install-card__dropdown");
-    if (!details) return;
+      var summary = details.querySelector("summary");
+      var items = panel.querySelectorAll(".dropdown__item");
 
-    var summary = details.querySelector("summary");
-    var items = panel.querySelectorAll(".dropdown__item");
+      // Auto-close <details> after selecting an option
+      items.forEach(function (item) {
+        item.addEventListener("click", function () {
+          details.removeAttribute("open");
+          updateOptionAria(panel);
+          /* Defer focus so it runs after the <label>'s native focus-the-input behavior.
+          This ensures focus goes back to the summary, not the radio input (which is visually hidden) */
+          setTimeout(function () {
+            summary.focus({ focusVisible: true });
+          }, 0);
+        });
 
-    // Auto-close <details> after selecting an option
-    items.forEach(function (item) {
-      item.addEventListener("click", function () {
-        details.removeAttribute("open");
-        summary.focus();
-        updateOptionAria(panel);
+        // Enter/Space to select
+        item.addEventListener("keydown", function (e) {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            item.click();
+            /* Defer focus so it runs after the <label>'s native focus-the-input behavior.
+            This ensures focus goes back to the summary, not the radio input (which is visually hidden) */
+            setTimeout(function () {
+              summary.focus({ focusVisible: true });
+            }, 0);
+          }
+        });
       });
 
-      // Enter/Space to select
-      item.addEventListener("keydown", function (e) {
-        if (e.key === "Enter" || e.key === " ") {
+      // Escape to close dropdown
+      details.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && details.hasAttribute("open")) {
           e.preventDefault();
-          item.click();
+          details.removeAttribute("open");
+          summary.focus({ focusVisible: true });
         }
       });
-    });
-
-    // Escape to close dropdown
-    details.addEventListener("keydown", function (e) {
-      if (e.key === "Escape" && details.hasAttribute("open")) {
-        e.preventDefault();
-        details.removeAttribute("open");
-        summary.focus();
-      }
-    });
 
-    // Update ARIA on radio change
-    panel.querySelectorAll('input[type="radio"]').forEach(function (radio) {
-      radio.addEventListener("change", function () {
-        updateOptionAria(panel);
+      // Update ARIA on radio change
+      panel.querySelectorAll('input[type="radio"]').forEach(function (radio) {
+        radio.addEventListener("change", function () {
+          updateOptionAria(panel);
+        });
       });
     });
-  });
 
-  function updateOptionAria(panel) {
-    var items = panel.querySelectorAll(".dropdown__item");
-    items.forEach(function (item) {
-      var radioId = item.getAttribute("for");
-      var radio = document.getElementById(radioId);
-      var isSelected = radio && radio.checked;
-      item.setAttribute("aria-selected", isSelected ? "true" : "false");
-    });
+    // Sync aria-selected on dropdown items to match the checked option radio.
+    function updateOptionAria(panel) {
+      var items = panel.querySelectorAll(".dropdown__item");
+      items.forEach(function (item) {
+        var radioId = item.getAttribute("for");
+        var radio = document.getElementById(radioId);
+        var isSelected = radio && radio.checked;
+        item.setAttribute("aria-selected", isSelected ? "true" : "false");
+      });
+    }
   }
 });
diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html
index 5947d0cc0..e5d134bb7 100644
--- a/templates/v3/examples/_v3_example_section.html
+++ b/templates/v3/examples/_v3_example_section.html
@@ -430,7 +430,12 @@ <h4 class="content-story-section__title">Content detail card</h4>
   <div class="v3-examples-section__block">
     <h3 class="block-title">Install Card</h3>
     <div class="v3-examples-section__example-box">
-      {% include "v3/includes/_install_card.html" with title=install_card_title %}
+      {% include "v3/includes/_install_card.html" with title=install_card_title card_id="install-1" %}
+    </div>
+
+    <h3 class="block-title">Install Card 2 (just a test for having multiple Install Cards on the same page)</h3>
+    <div class="v3-examples-section__example-box">
+      {% include "v3/includes/_install_card.html" with title=install_card_title card_id="install-2" %}
     </div>
   </div>
 
diff --git a/templates/v3/includes/_install_card.html b/templates/v3/includes/_install_card.html
index 3391595db..1d5067cb8 100644
--- a/templates/v3/includes/_install_card.html
+++ b/templates/v3/includes/_install_card.html
@@ -3,76 +3,133 @@
   Interactive card with tabbed installation methods and a dynamic command display.
   Uses CSS-only radio inputs for tab switching and option selection.
   JS enhances keyboard navigation only.
-  CSS in static/css/v3/install-card.css.
+
+  Architecture:
+    Two levels of CSS radio-driven show/hide:
+    1. Tab radios ({card_id}-tab-pkg / -tab-sys) are direct children of <section>.
+       Static :checked ~ sibling rules in install-card.css toggle panel visibility.
+    2. Option radios (inside each panel) control which command and dropdown label
+       are visible. Dynamic :checked ~ rules are generated in the inline <style>
+       block below because the number of options is data-driven.
 
   Variables:
     title (optional) — card heading text; defaults to "Install Boost and get started in your terminal."
-    install_card_pkg_managers — list of { label, value, command } for Package Managers tab
-    install_card_system_install — list of { label, value, command } for System Install tab
+    card_id (IMPORTANT) — unique identifier to scope IDs/names when multiple cards appear on the same page; defaults to slugified title, then "install"
+    install_card_pkg_managers — list of { label, value, command } dicts for Package Managers tab
+    install_card_system_install — list of { label, value, command } dicts for System Install tab
+
+    Each option dict:
+      label   — display text in the dropdown (e.g. "vcpkg")
+      value   — CSS-safe identifier, used in element IDs (e.g. "vcpkg"; no spaces or special characters)
+      command — terminal command shown in the code block (e.g. "vcpkg install boost")
+
+  Dependencies:
+    CSS: card.css, tab.css, install-card.css, code-block.css, forms.css (.dropdown)
+    JS:  install-card.js (keyboard nav + ARIA updates; optional — core works without it)
+
+  Accessibility:
+    - role="tablist" on tab container, role="tab" on labels, role="tabpanel" on panels
+    - aria-controls links tabs to panels; aria-labelledby links panels back to tabs
+    - JS adds: aria-selected sync on tab labels, dropdown keyboard support (Escape, Enter/Space)
 
   Usage:
-    {% include "v3/includes/_install_card.html" %}
+    {% include "v3/includes/_install_card.html" with card_id="install-1" install_card_pkg_managers=pkg_list install_card_system_install=sys_list %}
 {% endcomment %}
+{% with resolved_title=title|slugify|default:"install" %}
+{% with card_id=card_id|default:resolved_title %}
 {# Per-option visibility rules (generated from data, complements static rules in install-card.css) #}
 <style>
   {% for opt in install_card_pkg_managers %}
-  #pkg-{{ opt.value }}:checked ~ .code-block [data-option="pkg-{{ opt.value }}"] { display: block; }
-  #pkg-{{ opt.value }}:checked ~ .code-block .dropdown__trigger [data-option="pkg-{{ opt.value }}"] { display: inline; }
-  #pkg-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="pkg-{{ opt.value }}"] { color: var(--color-text-primary); font-weight: var(--font-weight-medium, 500); text-decoration: underline; }
-  #pkg-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="pkg-{{ opt.value }}"]:hover { color: var(--color-text-link-accent); }
+    /* Showing the matching command */
+    #{{ card_id }}-pkg-{{ opt.value }}:checked ~ .code-block [data-option="{{ card_id }}-pkg-{{ opt.value }}"] {
+      display: block;
+    }
+    /* Showing the matching dropdown label in the trigger */
+    #{{ card_id }}-pkg-{{ opt.value }}:checked ~ .code-block .dropdown__trigger [data-option="{{ card_id }}-pkg-{{ opt.value }}"] {
+      display: inline;
+    }
+    /* Highlighting the selected dropdown item (and adding underline) */
+    #{{ card_id }}-pkg-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="{{ card_id }}-pkg-{{ opt.value }}"] {
+      color: var(--color-text-primary);
+      font-weight: var(--font-weight-medium, 500);
+      text-decoration: underline;
+    }
+    #{{ card_id }}-pkg-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="{{ card_id }}-pkg-{{ opt.value }}"]:hover {
+      color: var(--color-text-link-accent);
+  }
   {% endfor %}
+
   {% for opt in install_card_system_install %}
-  #sys-{{ opt.value }}:checked ~ .code-block [data-option="sys-{{ opt.value }}"] { display: block; }
-  #sys-{{ opt.value }}:checked ~ .code-block .dropdown__trigger [data-option="sys-{{ opt.value }}"] { display: inline; }
-  #sys-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="sys-{{ opt.value }}"] { color: var(--color-text-primary); font-weight: var(--font-weight-medium, 500); text-decoration: underline; }
-  #sys-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="sys-{{ opt.value }}"]:hover { color: var(--color-text-link-accent); }
+    /* Showing the matching command */
+    #{{ card_id }}-sys-{{ opt.value }}:checked ~ .code-block [data-option="{{ card_id }}-sys-{{ opt.value }}"] {
+      display: block;
+    }
+    /* Showing the matching dropdown label in the trigger */
+    #{{ card_id }}-sys-{{ opt.value }}:checked ~ .code-block .dropdown__trigger [data-option="{{ card_id }}-sys-{{ opt.value }}"] {
+      display: inline;
+    }
+    /* Highlighting the selected dropdown item (and adding underline) */
+    #{{ card_id }}-sys-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="{{ card_id }}-sys-{{ opt.value }}"] {
+      color: var(--color-text-primary);
+      font-weight: var(--font-weight-medium, 500);
+      text-decoration: underline;
+    }
+    #{{ card_id }}-sys-{{ opt.value }}:checked ~ .code-block .dropdown__item[for="{{ card_id }}-sys-{{ opt.value }}"]:hover {
+      color: var(--color-text-link-accent);
+    }
   {% endfor %}
 </style>
 <section class="install-card card"
          data-install-card
-         aria-labelledby="install-card-heading">
+         aria-labelledby="{{ card_id }}-heading">
   {# Tab radio inputs — must be direct children of section for sibling selectors #}
   <input type="radio"
-         name="install-tab"
-         id="install-tab-pkg"
+         name="{{ card_id }}-tab"
+         id="{{ card_id }}-tab-pkg"
          checked
-         class="install-card__radio">
+         class="install-card__radio install-card__radio--pkg">
   <input type="radio"
-         name="install-tab"
-         id="install-tab-sys"
-         class="install-card__radio">
+         name="{{ card_id }}-tab"
+         id="{{ card_id }}-tab-sys"
+         class="install-card__radio install-card__radio--sys">
   <div class="card__header">
-    <h2 id="install-card-heading" class="card__title install-card__title">
+    <h2 id="{{ card_id }}-heading" class="card__title install-card__title">
       {{ title|default:"Install Boost and get started in your terminal." }}
     </h2>
   </div>
   <div class="install-card__body px-large">
     {# Tab list #}
     <div class="tab__list" role="tablist" aria-label="Installation method">
-      <label for="install-tab-pkg"
+      <label for="{{ card_id }}-tab-pkg"
              class="tab__trigger"
              role="tab"
-             id="install-tab-pkg-label"
-             aria-controls="install-panel-pkg">Package Managers</label>
-      <label for="install-tab-sys"
+             id="{{ card_id }}-tab-pkg-label"
+             aria-controls="{{ card_id }}-panel-pkg"
+             aria-selected="true"
+             tabindex="-1">Package Managers</label>
+      <label for="{{ card_id }}-tab-sys"
              class="tab__trigger"
              role="tab"
-             id="install-tab-sys-label"
-             aria-controls="install-panel-sys">System Install</label>
+             id="{{ card_id }}-tab-sys-label"
+             aria-controls="{{ card_id }}-panel-sys"
+             aria-selected="false"
+             tabindex="-1">System Install</label>
     </div>
     {# Panel: Package Managers #}
-    <div id="install-panel-pkg"
+    <div id="{{ card_id }}-panel-pkg"
          class="install-card__panel install-card__panel--pkg"
          role="tabpanel"
-         aria-labelledby="install-tab-pkg-label">
-      {% include "v3/includes/_install_card_tab_content_body.html" with options=install_card_pkg_managers prefix="pkg" only %}
+         aria-labelledby="{{ card_id }}-tab-pkg-label">
+      {% include "v3/includes/_install_card_tab_content_body.html" with options=install_card_pkg_managers prefix="pkg" card_id=card_id only %}
     </div>
     {# Panel: System Install #}
-    <div id="install-panel-sys"
+    <div id="{{ card_id }}-panel-sys"
          class="install-card__panel install-card__panel--sys"
          role="tabpanel"
-         aria-labelledby="install-tab-sys-label">
-      {% include "v3/includes/_install_card_tab_content_body.html" with options=install_card_system_install prefix="sys" only %}
+         aria-labelledby="{{ card_id }}-tab-sys-label">
+      {% include "v3/includes/_install_card_tab_content_body.html" with options=install_card_system_install prefix="sys" card_id=card_id only %}
     </div>
   </div>
 </section>
+{% endwith %}
+{% endwith %}
diff --git a/templates/v3/includes/_install_card_tab_content_body.html b/templates/v3/includes/_install_card_tab_content_body.html
index a655869cd..be5c196b6 100644
--- a/templates/v3/includes/_install_card_tab_content_body.html
+++ b/templates/v3/includes/_install_card_tab_content_body.html
@@ -1,21 +1,34 @@
 {% comment %}
   V3 Install Card — Tab Content Body
+  Internal sub-component — included only by _install_card.html. Do not use directly.
+
   Pre-rendered code block with embedded dropdown for one tab.
   Uses CSS radio inputs for option selection (no JS required).
   CSS: install-card.css, code-block.css, forms.css (.dropdown)
 
+  Structure:
+    Radio inputs and .code-block must be siblings (not nested) because the dynamic
+    <style> in _install_card.html uses :checked ~ .code-block selectors.
+    The dropdown uses <details>/<summary> for CSS-only open/close.
+
   Variables:
     options — list of { label, value, command } dicts
     prefix  — radio name prefix (e.g. "pkg", "sys")
+    card_id — unique card identifier for scoping IDs/names across multiple cards
+
+  Usage (internal):
+    {% include "v3/includes/_install_card_tab_content_body.html" with options=install_card_system_install prefix="sys" card_id=card_id only %}
 {% endcomment %}
 
-{# Option radio inputs — must be siblings of .code-block for CSS :checked selectors #}
+{# Option radio inputs for the different packages (e.g. vcpkg, conan) — must be siblings of .code-block for CSS :checked selectors #}
 {% for opt in options %}
 <input type="radio"
-       name="{{ prefix }}-option"
-       id="{{ prefix }}-{{ opt.value }}"
+       name="{{ card_id }}-{{ prefix }}-option"
+       id="{{ card_id }}-{{ prefix }}-{{ opt.value }}"
        {% if forloop.first %}checked{% endif %}
-       class="install-card__radio">
+       class="install-card__radio"
+       tabindex="-1"
+       >
 {% endfor %}
 
 {# Code block with commands + dropdown #}
@@ -23,7 +36,7 @@
   {# Pre-rendered commands — CSS shows only the one matching the checked radio #}
   {% for opt in options %}
   <pre class="code-block__inner install-card__cmd"
-       data-option="{{ prefix }}-{{ opt.value }}"><code class="nohighlight">{{ opt.command }}</code></pre>
+       data-option="{{ card_id }}-{{ prefix }}-{{ opt.value }}"><code class="nohighlight">{{ opt.command }}</code></pre>
   {% endfor %}
 
   {# Dropdown #}
@@ -34,7 +47,7 @@
       {# Pre-rendered labels — CSS shows only the one matching the checked radio #}
       {% for opt in options %}
       <span class="dropdown__label dropdown__trigger-text"
-            data-option="{{ prefix }}-{{ opt.value }}">{{ opt.label }}</span>
+            data-option="{{ card_id }}-{{ prefix }}-{{ opt.value }}">{{ opt.label }}</span>
       {% endfor %}
       {% include "includes/icon.html" with icon_name="chevron-down" icon_class="dropdown__chevron" only %}
     </summary>
@@ -43,7 +56,7 @@
          aria-label="Select installation method">
       <div class="dropdown__list">
         {% for opt in options %}
-        <label for="{{ prefix }}-{{ opt.value }}"
+        <label for="{{ card_id }}-{{ prefix }}-{{ opt.value }}"
                class="dropdown__item"
                role="option"
                {% if forloop.first %}aria-selected="true"{% else %}aria-selected="false"{% endif %}

From 631a50842fbbd065cf02aa06da6192eb02264af9 Mon Sep 17 00:00:00 2001
From: Greg Kaleka <greg@gregkaleka.com>
Date: Wed, 18 Mar 2026 14:59:23 -0400
Subject: [PATCH 2/2] V3: Fix icon/text alignment in account connections card
 (#2206)

---
 static/css/v3/account-connections.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/css/v3/account-connections.css b/static/css/v3/account-connections.css
index 472880c7f..81dbd3094 100644
--- a/static/css/v3/account-connections.css
+++ b/static/css/v3/account-connections.css
@@ -33,7 +33,7 @@
 
 .account-connections__platform {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: var(--space-default, 8px);
   flex-shrink: 0;
 }