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

Footer fix

Browse Source
This commit is contained in:
adilallo
2026-08-15 14:39:23 -06:00
parent f6752dd7f3
commit 4b0feb0811
3 changed files with 48 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/navigation/Footer.tsx
+13 -15
View File
@@ -25,7 +25,7 @@ const Footer = memo(() => {
/** Figma 18411:62925 (1024+): org name is one line, `w-full whitespace-nowrap`. */
const orgNameClass = `${bodyTextClass} lg:whitespace-nowrap`;
const primaryLinkClass = `inline-flex w-fit max-w-full shrink-0 whitespace-nowrap self-start md:self-end 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 shrink-0 whitespace-nowrap self-start md:ml-auto md:self-end text-left md:text-right md:justify-end 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 = `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)]`;
@@ -148,30 +148,22 @@ const Footer = memo(() => {
</div>
</div>
{/* Figma 18411:62937: column on the right, labels text-right at md+. Mobile stays start-aligned. */}
<nav
aria-label={tChrome("footerAriaLabel")}
className="order-1 flex w-full max-w-full flex-col
items-start
gap-[var(--spacing-scale-032)]
md:order-2 md:w-auto md:items-end md:text-right
md:order-2 md:ml-auto md:w-auto md:items-end md:text-right
md:gap-[var(--spacing-scale-032)]"
>
<Link
href="/use-cases"
className={`text-left ${primaryLinkClass} md:text-right`}
>
<Link href="/use-cases" className={primaryLinkClass}>
{t("navigation.useCases")}
</Link>
<Link
href="/learn"
className={`text-left ${primaryLinkClass} md:text-right`}
>
<Link href="/learn" className={primaryLinkClass}>
{t("navigation.learn")}
</Link>
<Link
href="/about"
className={`text-left ${primaryLinkClass} md:text-right`}
>
<Link href="/about" className={primaryLinkClass}>
{t("navigation.about")}
</Link>
</nav>
@@ -196,7 +188,13 @@ const Footer = memo(() => {
md:text-xs md:leading-4
lg:text-sm lg:leading-5"
>
{t("copyright")}
<a
href={t("license.href")}
rel="license"
className={`${linkFocusClass} p-2 -m-2 cursor-pointer`}
>
{t("license.label")}
</a>
</p>
<div
className="flex w-full min-w-0 flex-col flex-wrap