Merge pull request #340 from oaknational/feat/amend-alignment-of-medi…

…a-stack-item CTC-110: center align text
oaknational · Dec 10, 2024 · 474015c · 474015c
2 parents 6758023 + facf9fb
commit 474015c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git 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/...ms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/...ms/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;