From b1ad3c62039818265e2718aac360f4f1cdb410f3 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sun, 24 May 2026 16:52:52 -0600
Subject: [PATCH] Fix footer buttons

---
 app/components/navigation/Footer.tsx | 16 ++++++++--------
 tests/components/Footer.test.tsx     |  7 +++++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/components/navigation/Footer.tsx b/app/components/navigation/Footer.tsx
index e2c4f04..8f394e3 100644
--- a/app/components/navigation/Footer.tsx
+++ b/app/components/navigation/Footer.tsx
@@ -25,10 +25,10 @@ const Footer = memo(() => {
   /** Figma 18411:62925 (1024+): org name is one line, `w-full whitespace-nowrap`. */
   const orgNameClass = `${bodyTextClass} lg:whitespace-nowrap`;
 
-  const primaryLinkClass = `text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-2xl lg:font-normal lg:leading-7`;
+  const primaryLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-2xl lg:font-normal lg:leading-7`;
 
   /** Figma 18411:62944: 40px gaps, w-[396px] link block; `p-2` on links overruns 396px—tighten x at `md+` row. */
-  const legalLinkClass = `text-[var(--color-content-default-secondary)] font-inter text-sm font-normal leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer underline decoration-solid [text-decoration-skip-ink:none] md:px-0 md:py-1 md:mx-0 md:text-xs md:leading-4 md:whitespace-nowrap md:no-underline md:text-[var(--color-content-default-primary)] lg:text-sm lg:leading-5 lg:text-[var(--color-content-default-primary)]`;
+  const legalLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-secondary)] font-inter text-sm font-normal leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer underline decoration-solid [text-decoration-skip-ink:none] md:self-auto md:px-0 md:py-1 md:mx-0 md:text-xs md:leading-4 md:whitespace-nowrap md:no-underline md:text-[var(--color-content-default-primary)] lg:text-sm lg:leading-5 lg:text-[var(--color-content-default-primary)]`;
 
   // Schema markup for organization information
   const schemaData = {
@@ -86,7 +86,7 @@ const Footer = memo(() => {
                   <div className={orgNameClass}>{t("organization.name")}</div>
                   <a
                     href={`mailto:${t("organization.email")}`}
-                    className={`${bodyTextClass} ${linkFocusClass} p-2 -m-2 cursor-pointer`}
+                    className={`inline-flex w-fit max-w-full ${bodyTextClass} ${linkFocusClass} p-2 -m-2 cursor-pointer`}
                   >
                     {t("organization.email")}
                   </a>
@@ -98,7 +98,7 @@ const Footer = memo(() => {
                 >
                   <a
                     href={t("social.bluesky.url")}
-                    className={`group flex items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
+                    className={`group inline-flex w-fit max-w-full items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
                     aria-label={t("social.bluesky.ariaLabel")}
                   >
                     {/* eslint-disable-next-line @next/next/no-img-element -- social logo */}
@@ -113,7 +113,7 @@ const Footer = memo(() => {
                   </a>
                   <a
                     href={t("social.gitlab.url")}
-                    className={`group flex items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
+                    className={`group inline-flex w-fit max-w-full items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
                     aria-label={t("social.gitlab.ariaLabel")}
                   >
                     {/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
@@ -139,19 +139,19 @@ const Footer = memo(() => {
               >
                 <Link
                   href="/use-cases"
-                  className={`w-full text-left ${primaryLinkClass} md:w-auto md:text-right`}
+                  className={`text-left ${primaryLinkClass} md:text-right`}
                 >
                   {t("navigation.useCases")}
                 </Link>
                 <Link
                   href="/learn"
-                  className={`w-full text-left ${primaryLinkClass} md:w-auto md:text-right`}
+                  className={`text-left ${primaryLinkClass} md:text-right`}
                 >
                   {t("navigation.learn")}
                 </Link>
                 <Link
                   href="/about"
-                  className={`w-full text-left ${primaryLinkClass} md:w-auto md:text-right`}
+                  className={`text-left ${primaryLinkClass} md:text-right`}
                 >
                   {t("navigation.about")}
                 </Link>
diff --git a/tests/components/Footer.test.tsx b/tests/components/Footer.test.tsx
index 8ff0524..827d699 100644
--- a/tests/components/Footer.test.tsx
+++ b/tests/components/Footer.test.tsx
@@ -71,6 +71,13 @@ describe("Footer (behavioral tests)", () => {
     ).toBeGreaterThan(0);
   });
 
+  it("renders navigation links with baseline width-fit focus targets", () => {
+    render(<Footer />);
+    const useCases = screen.getAllByRole("link", { name: "Use cases" })[0];
+    expect(useCases).toHaveClass("w-fit", "self-start");
+    expect(useCases).not.toHaveClass("w-full");
+  });
+
   it("renders legal links", () => {
     render(<Footer />);
     expect(