From 773fd823e42cf3f96439df8e40a9e515c8584ba4 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 16 Oct 2024 11:10:49 -0400
Subject: [PATCH 1/3] fixing program letter template

---
 .../[id]/view/ProgramLetterPage.tsx           | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx b/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx
index 751e12e1f4..22d2df4c5c 100644
--- a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx
+++ b/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx
@@ -5,7 +5,6 @@ import { styled } from "ol-components"
 import { useProgramLettersDetail } from "api/hooks/programLetters"
 import { useParams } from "next/navigation"
 import { CkeditorDisplay } from "ol-ckeditor"
-import Image from "next/image"
 
 type RouteParams = {
   id: string
@@ -106,12 +105,28 @@ const ProgramLetterFooter = styled.div`
   }
 `
 
+const ImageContainer = styled.img(({ theme }) => ({
+  display: "flex",
+  alignItems: "end",
+  minWidth: "0px",
+  maxWidth: "646px",
+  [theme.breakpoints.up("sm")]: {
+    /**
+     * Flex 1, combined with the maxWidth, was causing the image to be stretched
+     * on Safari. We don't need flex 1 on the mobile layout, so omit it there.
+     */
+    flex: 1,
+  },
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "100%",
+  },
+}))
+
 const ProgramLetterPage: React.FC = () => {
   const { id } = useParams<RouteParams>()
   const programLetter = useProgramLettersDetail(id)
   const templateFields = programLetter.data?.template_fields
   const certificateInfo = programLetter.data?.certificate
-
   return (
     <ProgramLetterPageContainer className="letter">
       <ProgramLetterHeader>
@@ -123,10 +138,9 @@ const ProgramLetterPage: React.FC = () => {
           />
         </div>
         <div className="letter-logo">
-          <Image
+          <ImageContainer
             src={templateFields?.program_letter_logo?.meta?.download_url}
-            alt=""
-            fill
+            alt="letter-logo"
           />
         </div>
       </ProgramLetterHeader>
@@ -141,10 +155,9 @@ const ProgramLetterPage: React.FC = () => {
           {templateFields?.program_letter_signatories?.map((signatory) => (
             <div key={signatory.id} className="signatory">
               <div className="sig-image">
-                <Image
+                <ImageContainer
                   src={signatory.signature_image?.meta?.download_url}
                   alt="Signature"
-                  fill
                 />
               </div>
               <div className="name">
@@ -162,10 +175,9 @@ const ProgramLetterPage: React.FC = () => {
       <ProgramLetterFooter>
         <div className="program-footer">
           {templateFields?.program_letter_footer ? (
-            <Image
+            <ImageContainer
               src={templateFields.program_letter_footer?.meta?.download_url}
               alt=""
-              fill
             />
           ) : (
             <p>MITx MicroMasters program in {templateFields?.title}</p>

From bddcfc1358e7234710f5463332f4bb1b745877b0 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Thu, 17 Oct 2024 10:07:26 -0400
Subject: [PATCH 2/3] re-enabling test

---
 .../ProgramLetterPage/[id]/view/ProgramLetter.test.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetter.test.tsx b/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetter.test.tsx
index 46d1fe7ec0..587aa7ee1c 100644
--- a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetter.test.tsx
+++ b/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetter.test.tsx
@@ -19,7 +19,7 @@ const setup = ({ programLetter }: { programLetter: ProgramLetter }) => {
 
 describe("ProgramLetterDisplayPage", () => {
   // See https://github.com/mitodl/hq/issues/5694
-  it.skip("Renders a program letter from api", async () => {
+  it("Renders a program letter from api", async () => {
     const programLetter = factory.programLetter()
     setup({ programLetter })
     await waitFor(() => {

From 0880a12ffe06d0030965f1d345daafae8fd329b2 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Thu, 17 Oct 2024 10:53:30 -0400
Subject: [PATCH 3/3] adding space

---
 .../app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx b/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx
index 22d2df4c5c..f9a793e40c 100644
--- a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx
+++ b/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx
@@ -161,7 +161,7 @@ const ProgramLetterPage: React.FC = () => {
                 />
               </div>
               <div className="name">
-                {signatory.name},{signatory.title_line_1}
+                {signatory.name}, {signatory.title_line_1}
                 {signatory.title_line_2 ? (
                   <p>, {signatory.title_line_2}</p>
                 ) : (