Fix narrow shared shells (#6048)

Author: viktor-shcherb

apps/web/src/components/AuthShell.tsx

@@ -11,7 +11,7 @@ export function AuthShell({ children }: { children: ReactNode }) {
   const lp = useLocalePath();
 
   return (
-    <div className="mx-auto w-fit min-w-[24rem] max-w-lg px-4">
+    <div className="mx-auto w-full max-w-lg px-4 sm:w-fit sm:min-w-[24rem]">
       <div className="flex min-h-screen flex-col items-center justify-center py-8">
         <Link href={lp("/explore")} prefetch={false} className="mb-6 block h-9 w-36">
           <ThemedImage
@@ -20,6 +20,8 @@ export function AuthShell({ children }: { children: ReactNode }) {
             alt="Job Seek"
             width={144}
             height={36}
+            loading="eager"
+            fetchPriority="high"
           />
         </Link>
         <div className="w-full rounded-lg border border-border-soft bg-surface p-6 sm:p-8">

apps/web/src/components/Footer.tsx

@@ -34,7 +34,7 @@ export function Footer({ lang }: FooterProps) {
           </Trans>
         </p>
         <nav aria-label={i18n._(msg({ id: "common.footer.ariaLabel", comment: "Aria label for footer navigation", message: "Footer" }))} className="order-1 sm:order-2">
-          <ul className="flex list-none gap-4 p-0">
+          <ul className="flex flex-wrap list-none gap-x-4 gap-y-2 p-0">
             <li>
               <a className={linkClass} href={links.github.href} target="_blank" rel="noreferrer">
                 <Trans id="common.footer.github" comment="Footer link to GitHub repo">GitHub</Trans>

apps/web/src/components/ThemedImage.tsx

@@ -14,6 +14,8 @@ type ThemedImageProps = {
   className?: string;
   style?: CSSProperties;
   sizes?: string;
+  loading?: "eager" | "lazy";
+  fetchPriority?: "high" | "low" | "auto";
 };
 
 /**
@@ -41,6 +43,8 @@ export function ThemedImage({
   className,
   style,
   sizes,
+  loading,
+  fetchPriority,
 }: ThemedImageProps) {
   const { resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
@@ -57,6 +61,8 @@ export function ThemedImage({
       className={className}
       style={style}
       sizes={sizes}
+      loading={loading}
+      fetchPriority={fetchPriority}
     />
   );
 }

apps/web/src/components/__tests__/responsive-shared-shells.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+
+describe("responsive shared shells", () => {
+  it("allows the auth shell to shrink below its desktop minimum", () => {
+    const source = readFileSync("src/components/AuthShell.tsx", "utf8");
+    const themedImageSource = readFileSync(
+      "src/components/ThemedImage.tsx",
+      "utf8",
+    );
+
+    expect(source).toContain("w-full max-w-lg px-4");
+    expect(source).toContain("sm:w-fit sm:min-w-[24rem]");
+    expect(source).toContain('loading="eager"');
+    expect(source).toContain('fetchPriority="high"');
+    expect(themedImageSource).toContain("loading={loading}");
+    expect(themedImageSource).toContain("fetchPriority={fetchPriority}");
+    expect(source).not.toContain("w-fit min-w-[24rem] max-w-lg");
+  });
+
+  it("wraps public footer links on narrow viewports", () => {
+    const source = readFileSync("src/components/Footer.tsx", "utf8");
+
+    expect(source).toContain(
+      "flex flex-wrap list-none gap-x-4 gap-y-2 p-0",
+    );
+    expect(source).not.toContain('className="flex list-none gap-4 p-0"');
+  });
+});