From facf9fb7f48032e1ebae6dca2fcd8d6fa0053716 Mon Sep 17 00:00:00 2001
From: Kyle Huggins <kyle.huggins7@gmail.com>
Date: Tue, 10 Dec 2024 10:17:37 +0000
Subject: [PATCH] feat: center align text

---
 .../OakMediaClipStackListItem.tsx             |  1 +
 .../OakMediaClipStackListItem.test.tsx.snap   | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
index c28c3838..ad16a5f7 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
@@ -112,6 +112,7 @@ export const OakMediaClipStackListItem = (
       $flexDirection={["row", "row", "column"]}
       $gap={["all-spacing-2", "all-spacing-2", "space-between-none"]}
       $width={"fit-content"}
+      $alignItems={["center", "center", "flex-start"]}
       {...rest}
     >
       <OakBox>
diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
index 5ce9095e..57fc701b 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
@@ -69,6 +69,10 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   gap: 0.5rem;
 }
 
@@ -220,6 +224,24 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
   }
 }
 
+@media (min-width:750px) {
+  .c1 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media (min-width:1280px) {
+  .c1 {
+    -webkit-align-items: flex-start;
+    -webkit-box-align: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+  }
+}
+
 @media (min-width:750px) {
   .c1 {
     gap: 0.5rem;