CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix footer buttons

Browse Source
This commit is contained in:
adilallo
2026-05-24 16:52:52 -06:00
parent d8e0b87bb3
commit b1ad3c6203
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/navigation/Footer.tsx
+8 -8
View File
@@ -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>
tests/components/Footer.test.tsx
+7
View File
@@ -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(