From e4d00c63336fbe38f3d27f13f08682540943ab9e Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Wed, 21 Oct 2026 17:26:04 -0700
Subject: [PATCH] Keep spaced testimonial content and Read links in bounds

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/index/MigrationStories.tsx |  7 ++--
 .../src/templates/pages/css/index.scss        | 40 +++++++++++++++++--
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/index/MigrationStories.tsx b/packages/typescriptlang-org/src/components/index/MigrationStories.tsx
index 3ea2932b6844..d814f37509be 100644
--- a/packages/typescriptlang-org/src/components/index/MigrationStories.tsx
+++ b/packages/typescriptlang-org/src/components/index/MigrationStories.tsx
@@ -16,7 +16,7 @@ const Slack = () => (
           <p>TypeScript was such a boon to our stability and sanity that we started using it for all new code within days of starting the conversion.</p>
         </div>
         <div className="bg">
-          <svg aria-label="slack testimonial" name="slack testimonial" width="780" height="380" viewBox="0 0 780 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg aria-label="slack testimonial" name="slack testimonial" width="780" height="380" viewBox="0 0 780 380" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path opacity="0.6" d="M0.5 11C0.5 5.201 5.20101 0.5 11 0.5H769C774.799 0.5 779.5 5.20101 779.5 11V379.5H0.5V11Z" stroke="black" />
             <rect opacity="0.6" x="21.5" y="33.5" width="39" height="39" rx="10.5" stroke="black" />
             <rect opacity="0.6" x="21.5" y="92.5" width="39" height="39" rx="10.5" stroke="black" />
@@ -64,7 +64,7 @@ const AirBnB = () => (
           <p>End-to-end type safety because the types used by the back-end and the front-end share a source of truth.</p>
         </div>
         <div className="bg">
-          <svg aria-label="airbnb testimonial" name="airbnb testimonial" width="780" height="380" viewBox="0 0 780 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg aria-label="airbnb testimonial" name="airbnb testimonial" width="780" height="380" viewBox="0 0 780 380" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="44.5" y="79.5" width="93" height="20" stroke="black" strokeOpacity="0.6" />
             <rect x="44.5" y="139.5" width="171" height="20" stroke="black" strokeOpacity="0.6" />
             <rect x="44.5" y="179.5" width="171" height="20" stroke="black" strokeOpacity="0.6" />
@@ -111,7 +111,7 @@ const Google = () => (
           <p>Around eight or nine languages are officially supported and TypeScript is one of them.</p>
         </div>
         <div className="bg">
-          <svg aria-label="google testimonial" name="google testimonial" width="780" height="380" viewBox="0 0 780 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg aria-label="google testimonial" name="google testimonial" width="780" height="380" viewBox="0 0 780 380" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="414.5" y="244.5" width="79" height="20" stroke="black" strokeOpacity="0.3" />
             <rect x="284.5" y="244.5" width="79" height="20" stroke="black" strokeOpacity="0.3" />
             <path opacity="0.6" d="M0.5 11C0.5 5.201 5.20101 0.5 11 0.5H769C774.799 0.5 779.5 5.20101 779.5 11V379.5H0.5V11Z" stroke="black" />
@@ -515,4 +515,3 @@ export const GitHubBar = ({ left }) =>
   </svg>
 
 
-
diff --git a/packages/typescriptlang-org/src/templates/pages/css/index.scss b/packages/typescriptlang-org/src/templates/pages/css/index.scss
index 6476dd5eafbd..d46f54727e97 100644
--- a/packages/typescriptlang-org/src/templates/pages/css/index.scss
+++ b/packages/typescriptlang-org/src/templates/pages/css/index.scss
@@ -118,16 +118,25 @@ $headline-foreground-bg: white;
       flex-direction: column;
     }
 
+    #m-stories .slides > .row > .small_full_width {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
     #m-stories div.illustration  {
       display: flex;
       justify-content: center;
       order: 1;
+      grid-column: 1;
+      grid-row: 1;
+      min-height: 0;
       div.bg {
         visibility: hidden;
       }
       div.fg {
         position: static;
         text-align: center;
+        margin: 0 auto;
+        max-width: 100%;
       }
     }
 
@@ -136,6 +145,9 @@ $headline-foreground-bg: white;
       position: static;
       text-align: center;
       order: 2;
+      grid-column: 1;
+      grid-row: 2;
+      max-width: calc(100% - 50px);
       a.migration-button {
         margin: 0 auto;
       }
@@ -819,6 +831,13 @@ $headline-foreground-bg: white;
     position: relative;
     min-height: 370px;
 
+    .slides > .row > .small_full_width {
+      display: grid;
+      grid-template-columns: 310px minmax(0, 1fr);
+      width: 100%;
+      align-items: start;
+    }
+
     .controls a {
       background-color: #c4c4c4;
       width: 2rem;
@@ -876,7 +895,9 @@ $headline-foreground-bg: white;
     }
 
     .copy {
-      position: absolute;
+      position: relative;
+      grid-column: 1;
+      grid-row: 1;
       padding-left: 20px;
       padding-right: 30px;
       width: 260px;
@@ -909,17 +930,30 @@ $headline-foreground-bg: white;
     }
 
     .illustration {
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      min-height: 380px;
+
       .bg {
         position: absolute;
+        top: 0;
         right: 20px;
+        height: 100%;
+
+        svg {
+          height: 100%;
+        }
       }
 
       .fg {
         font-size: 1.4rem;
         line-height: 1.6rem;
         width: 370px;
-        position: absolute;
-        right: 70px;
+        max-width: calc(100% - 70px);
+        position: relative;
+        margin-left: auto;
+        margin-right: 70px;
       }
     }
   }