From 74ab918b18ae1c28c3c31477cf6a2e575ca72684 Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Tue, 17 Sep 2024 14:32:17 +0000
Subject: [PATCH 1/3] Removed the absolute

---
 src/components/node/stanford-news/page-display.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/node/stanford-news/page-display.tsx b/src/components/node/stanford-news/page-display.tsx
index 2c919224..794a0e36 100644
--- a/src/components/node/stanford-news/page-display.tsx
+++ b/src/components/node/stanford-news/page-display.tsx
@@ -89,7 +89,7 @@ const StanfordNews = async ({node, ...props}: {node: NodeStanfordNews}) => {
 
       {imageUrl && (
         <figure className="relative mx-auto mb-100 aspect-[16/9] lg:w-10/12">
-          <Image className="object-cover" src={buildUrl(imageUrl).toString()} alt={imageAlt || ""} fill />
+          <Image className="!relative object-cover" src={buildUrl(imageUrl).toString()} alt={imageAlt || ""} fill />
 
           {node.suNewsBannerMediaCaption && (
             <figcaption className="caption text-center">{node.suNewsBannerMediaCaption}</figcaption>

From d67c50228c3ac1701f401f12362fc03036abe75a Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Tue, 17 Sep 2024 16:19:11 +0000
Subject: [PATCH 2/3] fixup to table

---
 src/components/node/stanford-news/page-display.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/node/stanford-news/page-display.tsx b/src/components/node/stanford-news/page-display.tsx
index 794a0e36..3d4c37cc 100644
--- a/src/components/node/stanford-news/page-display.tsx
+++ b/src/components/node/stanford-news/page-display.tsx
@@ -88,9 +88,10 @@ const StanfordNews = async ({node, ...props}: {node: NodeStanfordNews}) => {
       <hr className="mx-auto mb-100 w-1/2 text-black-40" />
 
       {imageUrl && (
-        <figure className="relative mx-auto mb-100 aspect-[16/9] lg:w-10/12">
-          <Image className="!relative object-cover" src={buildUrl(imageUrl).toString()} alt={imageAlt || ""} fill />
-
+        <figure className="mb-100 table">
+          <span className="relative mx-auto block aspect-[16/9] lg:w-10/12">
+            <Image className="object-cover" src={buildUrl(imageUrl).toString()} alt={imageAlt || ""} fill />
+          </span>
           {node.suNewsBannerMediaCaption && (
             <figcaption className="caption text-center">{node.suNewsBannerMediaCaption}</figcaption>
           )}
@@ -98,8 +99,10 @@ const StanfordNews = async ({node, ...props}: {node: NodeStanfordNews}) => {
       )}
 
       {node.suNewsBanner?.__typename === "MediaVideo" && (
-        <figure className="relative mx-auto mb-100 aspect-[16/9] w-10/12">
-          <Oembed url={node.suNewsBanner.mediaOembedVideo} />
+        <figure className="mb-100 table">
+          <span className="relative mx-auto block aspect-[16/9] w-10/12">
+            <Oembed url={node.suNewsBanner.mediaOembedVideo} />
+          </span>
           {node.suNewsBannerMediaCaption && (
             <figcaption className="caption text-center">{node.suNewsBannerMediaCaption}</figcaption>
           )}

From dfd1264e1f892ad529b4621c8c546e18b9d94e5f Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Tue, 17 Sep 2024 19:47:17 +0000
Subject: [PATCH 3/3] fixup

---
 src/components/node/stanford-news/page-display.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/node/stanford-news/page-display.tsx b/src/components/node/stanford-news/page-display.tsx
index 3d4c37cc..b5648247 100644
--- a/src/components/node/stanford-news/page-display.tsx
+++ b/src/components/node/stanford-news/page-display.tsx
@@ -88,23 +88,27 @@ const StanfordNews = async ({node, ...props}: {node: NodeStanfordNews}) => {
       <hr className="mx-auto mb-100 w-1/2 text-black-40" />
 
       {imageUrl && (
-        <figure className="mb-100 table">
+        <figure className="mb-100 table w-full">
           <span className="relative mx-auto block aspect-[16/9] lg:w-10/12">
             <Image className="object-cover" src={buildUrl(imageUrl).toString()} alt={imageAlt || ""} fill />
           </span>
           {node.suNewsBannerMediaCaption && (
-            <figcaption className="caption text-center">{node.suNewsBannerMediaCaption}</figcaption>
+            <figcaption className="table-caption caption-bottom text-center">
+              {node.suNewsBannerMediaCaption}
+            </figcaption>
           )}
         </figure>
       )}
 
       {node.suNewsBanner?.__typename === "MediaVideo" && (
-        <figure className="mb-100 table">
+        <figure className="mb-100 table w-full">
           <span className="relative mx-auto block aspect-[16/9] w-10/12">
             <Oembed url={node.suNewsBanner.mediaOembedVideo} />
           </span>
           {node.suNewsBannerMediaCaption && (
-            <figcaption className="caption text-center">{node.suNewsBannerMediaCaption}</figcaption>
+            <figcaption className="table-caption caption-bottom text-center">
+              {node.suNewsBannerMediaCaption}
+            </figcaption>
           )}
         </figure>
       )}