fix: Prevent mobile homepage overflow (#13453)

## Summary
- prevent homepage grid cells from creating an implicit second mobile
column
- constrain feature illustrations to their containers at narrow
breakpoints
- keep the compute-saved label on one line with contained mobile sizing
and spacing
- keep existing desktop illustration and counter sizes

## Testing
- `pnpm --dir apps/docs collect-examples-data`
- `pnpm --dir apps/docs check-types`
- browser validation at 320px, 390px, 400px, 430px, 433px, 458px, 459px,
498px, and 1280px widths
- verified counter number and label bounds, spacing, and document width
- pre-push format and TOML checks

Author: anthonyshew

apps/docs/app/[lang]/(home)/graphics/sizing-string.ts

@@ -1,2 +1,2 @@
 export const sizingString =
-  "mx-auto h-[160px] xs:w-[326px] sm:w-[542px] md:w-[194px] lg:w-[255px] xl:w-[298px] xs:w-full";
+  "mx-auto h-[160px] max-w-full xs:w-[326px] sm:w-[542px] md:w-[194px] lg:w-[255px] xl:w-[298px] xs:w-full";

apps/docs/app/[lang]/(home)/page.tsx

@@ -64,7 +64,7 @@ export default function HomePage() {
         }}
         className="relative border border-border/50"
       >
-        <GridCell className="relative border-b border-border/50 col-span-2 px-6 py-12 xs:px-6 xs:py-12 md:p-16">
+        <GridCell className="relative border-b border-border/50 col-span-full px-6 py-12 xs:px-6 xs:py-12 md:p-16">
           <DottedLines className="absolute top-0 bottom-0 left-0 right-0 overflow-hidden text-center flex items-center justify-center" />
           <div className="relative z-1 flex flex-col justify-center">
             <h1 className="mb-4 text-6xl font-semibold tracking-tighter text-center md:text-7xl">
@@ -77,10 +77,10 @@ export default function HomePage() {
             <div className="flex justify-center mt-2 mb-10">
               <div className="relative inline-flex w-full xs:w-auto">
                 <div className="absolute inset-0 rounded-lg xs:rounded-[22px] bg-gradient-to-r from-[#FF1E56] to-[#0196FF] w-full xs:w-auto"></div>
-                <div className="relative text-center rounded-md xs:rounded-[20px] m-[2px] bg-background dark:bg-black px-4 py-1.5 md:px-5 md:py-0.5 w-full xs:w-auto">
-                  <span className="flex flex-col gap-0 items-center xs:flex-row sm:gap-1 text-base sm:text-xl leading-tight bg-gradient-to-r from-[#FF1E56] to-[#0196FF] bg-clip-text text-transparent">
+                <div className="relative text-center rounded-md xs:rounded-[20px] m-[2px] bg-background dark:bg-black px-2 py-1.5 md:px-5 md:py-0.5 w-full xs:w-auto">
+                  <span className="flex flex-col gap-0 items-center xs:flex-row xs:gap-1 text-base md:text-xl leading-tight bg-gradient-to-r from-[#FF1E56] to-[#0196FF] bg-clip-text text-transparent">
                     <RemoteCacheCounterClient className="" />
-                    <span>hours of compute saved</span>
+                    <span className="whitespace-nowrap">hours of compute saved</span>
                   </span>
                 </div>
               </div>
@@ -99,7 +99,7 @@ export default function HomePage() {
             </div>
           </div>
         </GridCell>
-        <GridCell className="border-0 h-fit col-span-2 px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12">
+        <GridCell className="border-0 h-fit col-span-full px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12">
           <h2 className="mb-1 text-[32px] font-semibold tracking-tighter">
             Scale your workflows
           </h2>
@@ -121,7 +121,7 @@ export default function HomePage() {
             ))}
           </div>
         </GridCell>
-        <GridCell className="col-span-2 px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12">
+        <GridCell className="col-span-full px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12">
           <div className="flex flex-col items-start justify-between gap-y-4 md:flex-row">
             <div className="flex flex-col gap-y-1">
               <h2 className="text-[32px] font-semibold tracking-tighter">
@@ -166,14 +166,14 @@ export default function HomePage() {
             </div>
           </div>
         </GridCell>
-        <GridCell className="col-span-2 px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12 border-b border-border/50">
+        <GridCell className="col-span-full px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12 border-b border-border/50">
           <h2 className="text-[32px] font-semibold tracking-tighter">
             What builders say about Turborepo
           </h2>
 
           <Testimonials />
         </GridCell>
-        <GridCell className="col-span-2 px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12">
+        <GridCell className="col-span-full px-6 py-14 xs:px-6 xs:py-10 md:px-9 lg:px-12">
           <div className="flex flex-col items-start gap-y-6 md:flex-row md:items-center md:justify-between md:gap-x-6">
             <h2 className="text-[32px] font-semibold tracking-tighter md:text-[40px]">
               Deploy your Turborepo today.