From 17e50a893991f6e0fc221514553c8c1e6670139a Mon Sep 17 00:00:00 2001
From: Thomas Jeffery <thomaswjeffery@gmail.com>
Date: Tue, 22 Jul 2025 13:23:18 -0600
Subject: [PATCH] Bug fix: mobile language switcher controls breaking on mobile

---
 .../version-language-switcher/HelpButton.tsx  |  6 ++---
 .../VersionLanguageSwitcher.tsx               |  8 +++----
 .../version-language-switcher.css             | 22 ++++++++++++++++---
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/version-language-switcher/HelpButton.tsx b/src/components/version-language-switcher/HelpButton.tsx
index 60eb0424a..7fb14e824 100644
--- a/src/components/version-language-switcher/HelpButton.tsx
+++ b/src/components/version-language-switcher/HelpButton.tsx
@@ -24,9 +24,9 @@ export function HelpButton() {
   };
 
   return (
-    <GoabTooltip content="More information">
-      <GoabIconButton ml={"s"}
-                      mr={"s"}
+    <GoabTooltip content="Version and framework info">
+      <GoabIconButton ml={"xs"}
+                      mb={"2xs"}
                       variant="color"
                       size="small"
                       icon="help-circle"
diff --git a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx
index eab1f6c55..e98056ed2 100644
--- a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx
+++ b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx
@@ -1,6 +1,6 @@
 import {
   GoabIcon,
-  GoabPopover, GoabTooltip
+  GoabPopover
 } from "@abgov/react-components";
 import {
   ANGULAR_VERSIONS, getVersionedUrlPath, Language, LanguageVersion,
@@ -103,7 +103,7 @@ export const VersionLanguageSwitcher = () => {
 
   return (
     <>
-      <GoabTooltip content="Framework">
+      <div className="version-language-switcher">
       <GoabPopover
         target={
           <a className="version-language-switcher__heading" href="#" id="language-switcher" onClick={e => openLanguagePopOver(e)}>
@@ -119,9 +119,7 @@ export const VersionLanguageSwitcher = () => {
           }
         </>
       </GoabPopover>
-      </GoabTooltip>
 
-      <GoabTooltip content="Version">
       <GoabPopover target={
         <a className="version-language-switcher__heading" href="#"
            onClick={e => openVersionPopOver(e)}>
@@ -136,7 +134,7 @@ export const VersionLanguageSwitcher = () => {
           ))}
         </>
       </GoabPopover>
-      </GoabTooltip>
+      </div>
     </>
   );
 }
diff --git a/src/components/version-language-switcher/version-language-switcher.css b/src/components/version-language-switcher/version-language-switcher.css
index 90615431b..f2594c468 100644
--- a/src/components/version-language-switcher/version-language-switcher.css
+++ b/src/components/version-language-switcher/version-language-switcher.css
@@ -3,7 +3,6 @@
     align-items: center;
     gap: var(--goa-space-2xs);
     font-size: var(--goa-font-size-2);
-    margin-left: var(--goa-space-m);
     white-space: nowrap;
     height: 20px;
 }
@@ -30,13 +29,30 @@
     align-items: center; /* vertically align content */
 }
 
+.version-language-switcher {
+    height: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center; /* vertically align content */
+    gap: var(--goa-space-s);
+    margin-bottom: var(--goa-space-xs);
+}
+
 @media (max-width: 623px) {
     [slot="version"] {
         display: flex; /* if needed to align items horizontally */
-        flex-direction: column;
+        flex-direction: row;
         align-items: flex-start;
-        gap: 2px;
+        gap: 0;
         margin-top: 0;
+        height: auto;
+    }
 
+    .version-language-switcher {
+        height: auto;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+        margin-bottom: var(--goa-space-3xs);
     }
 }
\ No newline at end of file