Set align-items to normal

As center affected the list items too. Also add it to the flex component because it didn't have it as an option.
element-hq · Feb 19, 2025 · 660aa52 · 660aa52
1 parent 18c480a
commit 660aa52
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/components/utils/Flex.tsx b/src/components/utils/Flex.tsx
@@ -33,7 +33,7 @@ type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any
      * The alignment of the flex children
      * @default start
      */
-    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    align?: "start" | "center" | "end" | "baseline" | "stretch" | "normal";
     /**
      * The justification of the flex children
      * @default start

diff --git a/src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx b/src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx
@@ -18,7 +18,7 @@ export function EncryptionCardEmphasisedContent({ children }: PropsWithChildren)
         <Flex
             direction="column"
             gap="var(--cpd-space-3x)"
-            align="center"
+            align="normal"
             className="mx_EncryptionCard_emphasisedContent"
         >
             {children}

diff --git a/...tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap b/...tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
@@ -84,7 +84,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     </div>
     <div
       class="mx_Flex mx_EncryptionCard_emphasisedContent"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
       <ul
         class="_visual-list_4dcf8_17"
@@ -265,7 +265,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     </div>
     <div
       class="mx_Flex mx_EncryptionCard_emphasisedContent"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
       <ul
         class="_visual-list_4dcf8_17"

diff --git a/...components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap b/...components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
@@ -255,7 +255,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         </div>
         <div
           class="mx_Flex mx_EncryptionCard_emphasisedContent"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
         >
           <ul
             class="_visual-list_4dcf8_17"