Merge pull request #431 from wrappid/WRPD-enhancement-430

fix(core): 🐛 handle impact of style package
wrappid · Nov 26, 2024 · d268f1f · d268f1f
2 parents c07d1fc + 0d87ea0
commit d268f1f
Show file tree

Hide file tree

Showing 27 changed files with 84 additions and 67 deletions.
diff --git a/package/components/dataDisplay/CoreEmailOrPhoneLink.js b/package/components/dataDisplay/CoreEmailOrPhoneLink.js
@@ -57,7 +57,7 @@ export default function CoreEmailOrPhoneLink(props) {
     <>
       {props.data && (
         <CoreTypographyBody1
-          styleClasses={[UtilityClasses?.ALIGNMENT?.ALIGN_ITEMS_CENTER]}
+          styleClasses={[UtilityClasses?.DISPLAY?.FLEX, UtilityClasses?.ALIGNMENT?.ALIGN_ITEMS_CENTER]}
           noWrap={true}
         >
           {

diff --git a/package/components/dataDisplay/CoreIconText.js b/package/components/dataDisplay/CoreIconText.js
@@ -84,7 +84,7 @@ export default function CoreIconText(props) {
     <CoreStack
       direction="row"
       spacing={1}
-      styleClasses={[...(styleClasses || []), CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+      styleClasses={[...(styleClasses || []), CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
     >
       <CoreIcon
         size={size}

diff --git a/package/components/dataDisplay/dataTable/CoreDataTableRow.js b/package/components/dataDisplay/dataTable/CoreDataTableRow.js
@@ -214,7 +214,7 @@ export default function CoreDataTableRow(props) {
             >
               <CoreStack
                 direction="column"
-                styleClasses={[UtilityClasses.PADDING.PY5, UtilityClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, UtilityClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+                styleClasses={[UtilityClasses.PADDING.PY5, CoreClasses.DISPLAY.FLEX, UtilityClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, UtilityClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
               >
                 <CoreTypographyBody1>
                 No {getLabel(tableUUID).toLocaleLowerCase()}(s) available
@@ -252,7 +252,7 @@ export default function CoreDataTableRow(props) {
             }
           >
             <CoreBox
-              styleClasses={[UtilityClasses?.FLEX?.DIRECTION_ROW, UtilityClasses.PADDING.P5, UtilityClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}
+              styleClasses={[UtilityClasses?.DISPLAY?.FLEX, UtilityClasses?.FLEX?.DIRECTION_ROW, UtilityClasses?.ALIGNMENT?.JUSTIFY_CONTENT_CENTER, UtilityClasses?.PADDING?.P5]}
             >
               <CoreTypographyBody1>{loading ? "Loading..." : "Please select a column"}</CoreTypographyBody1>
             </CoreBox>

diff --git a/package/components/dataDisplay/dataTable/CoreDataTableRowSummary.js b/package/components/dataDisplay/dataTable/CoreDataTableRowSummary.js
@@ -136,7 +136,7 @@ export default function CoreDataTableRowSummary(props) {
               <CoreStack
                 direction="row"
                 spacing={1}
-                styleClasses={[UtilityClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}
+                styleClasses={[UtilityClasses.DISPLAY.FLEX, UtilityClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}
               >
                 {/* hasId &&  */ getIdComponent()}
                 {/* hasStatus &&  */ getStatusComponent()}

diff --git a/package/components/dataDisplay/dataTable/FilterData.js b/package/components/dataDisplay/dataTable/FilterData.js
@@ -89,7 +89,7 @@ export default function FilterData(props) {
       })}
 
       <CoreBox
-        styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.PADDING.PT2]}
+        styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.PADDING.PT2]}
       >
         <CoreTextButton
           label={

diff --git a/package/components/dataDisplay/dataTable/SortTableData.js b/package/components/dataDisplay/dataTable/SortTableData.js
@@ -97,11 +97,11 @@ export default function SortTableData(props) {
             !auditColumnsKey.includes(col.id) && (
               <CoreStack
                 direction="row"
-                styleClasses={[CoreClasses.WIDTH.W_100, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+                styleClasses={[CoreClasses.WIDTH.W_100, CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
               >
                 <CoreStack
                   direction="row"
-                  styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+                  styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
                 >
                   <CoreTypographyBody1 styleClasses={[CoreClasses.MARGIN.MB0]}>
                     {col?.label || getLabel(col?.id || "Unknown")}&nbsp;
@@ -124,7 +124,7 @@ export default function SortTableData(props) {
 
                 <CoreStack
                   direction="row"
-                  styleClasses={[CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+                  styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
                 >
                   <CoreIconButton
                     onClick={(event) => {

diff --git a/package/components/dataDisplay/dataTable/TableRowAuditData.js b/package/components/dataDisplay/dataTable/TableRowAuditData.js
@@ -40,7 +40,7 @@ function AuditDataComponent({ type, rowData }) {
   return (
     rowData?.[`${type}At`] &&
     rowData?.[`${type}By`] && (
-      <CoreGrid styleClasses={[CoreClasses?.ALIGNMENT?.ALIGN_ITEMS_CENTER]}>
+      <CoreGrid styleClasses={[CoreClasses?.DISPLAY?.FLEX, CoreClasses?.ALIGNMENT?.ALIGN_ITEMS_CENTER]}>
         <CoreTypographyCaption gridProps={{ gridSize: 8 }}>
           {`${getLabel(type)} at ${
             (rowData[`${type}At`] &&

diff --git a/package/components/inputs/ChildMap.js b/package/components/inputs/ChildMap.js
@@ -10,7 +10,7 @@ import CoreGrid from "../layouts/CoreGrid";
 
 export default function ChildMap({ parentOb, handleChange, formData, label }) {
   return parentOb?.__children?.map((childOb) => (
-    <CoreGrid key={childOb.id} styleClasses={[CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}>
+    <CoreGrid key={childOb.id} styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}>
       <CoreBox
         gridProps={{ gridSize: 10 }}
         styleClasses={[CoreClasses.MARGIN.ML5, CoreClasses.PADDING.PL3]}

diff --git a/package/components/inputs/CoreMultiTimeRangePicker.js b/package/components/inputs/CoreMultiTimeRangePicker.js
@@ -88,7 +88,7 @@ export default function CoreMultiTimeRangePicker(props) {
             />
           </CoreGrid>
 
-          <CoreBox gridProps={{ gridSize: 1, styleClasses: [CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END, CoreClasses.ALIGNMENT.ALIGN_ITEMS_END] }} >
+          <CoreBox gridProps={{ gridSize: 1, styleClasses: [CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END, CoreClasses.ALIGNMENT.ALIGN_ITEMS_END] }} >
             {index < 1 ? (
               <CoreIconButton
                 onClick={addRange}

diff --git a/package/components/inputs/ParentChildMap.js b/package/components/inputs/ParentChildMap.js
@@ -153,7 +153,7 @@ export default function ParentChildMap(props) {
           styleClasses={[CoreClasses.FLEX.DIRECTION_ROW_REVERSE, CoreClasses.PADDING.PX1, CoreClasses.MARGIN.MY0]}
         >
           <CoreGrid
-            styleClasses={[CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.MARGIN.ML0]}
+            styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.MARGIN.ML0]}
           >
             <CoreBox gridProps={{ gridSize: 10 }}>
               <CoreCheckbox

diff --git a/package/components/inputs/forms/CoreForm.js b/package/components/inputs/forms/CoreForm.js
@@ -969,7 +969,7 @@ class CoreForm extends Component {
                           {!editForm[formId]?.editing && (
                             <CoreBox
                               gridProps={{ gridSize: 2 }}
-                              styleClasses={[CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
+                              styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
                               {formDataReadLoading[formId] ? null : (
                                 <CoreFormHeaderActions
                                   key={`${formId}-cfh-act-${index}`}
@@ -1088,7 +1088,7 @@ class CoreForm extends Component {
                     this.state.hideFlag && (
                     <CoreBox
                       key={`cf-show-${formId}`}
-                      styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.FLEX.DIRECTION_ROW]}>
+                      styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.FLEX.DIRECTION_ROW]}>
                       <CoreLink
                         key={`cf-show-link-${formId}`}
                         href={

diff --git a/package/components/inputs/forms/CoreFormHeaderActions.js b/package/components/inputs/forms/CoreFormHeaderActions.js
@@ -18,7 +18,7 @@ export default function CoreFormHeaderActions(props) {
   return props.action ? (
     Array.isArray(props.action) ? (
       <CoreBox
-        styleClasses={[CoreClasses?.FLEX?.DIRECTION_ROW, CoreClasses?.ALIGNMENT?.JUSTIFY_CONTENT_FLEX_END, CoreClasses?.ALIGNMENT?.ALIGN_ITEMS_START]}>
+        styleClasses={[CoreClasses?.DISPLAY?.FLEX, CoreClasses?.FLEX?.DIRECTION_ROW, CoreClasses?.ALIGNMENT?.JUSTIFY_CONTENT_FLEX_END, CoreClasses?.ALIGNMENT?.ALIGN_ITEMS_START]}>
         {props.action.map((action, i) => (
           <CoreIconButton
             style={

diff --git a/package/components/inputs/forms/CoreFormInputs.js b/package/components/inputs/forms/CoreFormInputs.js
@@ -154,7 +154,7 @@ export default function CoreFormInputs(props) {
             <CoreBox
               key={`cf-stt-container-${formId}-${element?.id || element?.name}`}
               gridProps={{ gridSize: 1 }}
-              styleClasses={[CoreClasses?.ALIGNMENT?.ALIGN_ITEMS_CENTER]}
+              styleClasses={[CoreClasses?.DISPLAY?.FLEX, CoreClasses?.ALIGNMENT?.ALIGN_ITEMS_CENTER]}
             >
               <CoreSpeechToText
                 key={`cf-stt-${formId}-${element?.id || element?.name}`}

diff --git a/package/components/navigation/CoreMenu.js b/package/components/navigation/CoreMenu.js
@@ -47,8 +47,8 @@ export default function CoreMenu(props) {
       direction="column"
       styleClasses={
         miniDrawer && open
-          ? [CoreClasses.ALIGNMENT.ALIGN_ITEMS_START]
-          : [CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]
+          ? [CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_START]
+          : [CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]
       }
     >
       {createMultiLevelMenu(

diff --git a/package/components/navigation/Logout.js b/package/components/navigation/Logout.js
@@ -42,7 +42,7 @@ export default function Logout() {
             )
           ) : (
             <CoreBox
-              styleClasses={[CoreClasses.HEIGHT.VH_100, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+              styleClasses={[CoreClasses.HEIGHT.VH_100, CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
             >
               <CoreTypographyBody1>Signing Off...</CoreTypographyBody1>
             </CoreBox>

diff --git a/package/components/surfaces/CoreFooter.js b/package/components/surfaces/CoreFooter.js
@@ -22,13 +22,13 @@ export default function CoreFooter(props) {
     ]}>
       <CoreBox
         gridProps={{ gridSize: { md: 4 } }}
-        styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_START]}>
+        styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_START]}>
         <CoreAppVersion noTitle={true} />
       </CoreBox>
 
       <CoreBox
         gridProps={{ gridSize: { md: 4 } }}
-        styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
+        styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
         <CoreTypographyCaption>
           {`${config?.wrappid?.footerText || "Wrappid Default Footer"} © ${new Date().getFullYear()}`}
         </CoreTypographyCaption>
@@ -37,13 +37,13 @@ export default function CoreFooter(props) {
       {/* eslint-disable-next-line etc/no-commented-out-code */}
       {/* <CoreBox
         gridProps={{ gridSize: { md: 3 } }}
-        styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
+        styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
         <ThemeSelector />
       </CoreBox> */}
 
       <CoreBox
         gridProps={{ gridSize: { md: 4 } }}
-        styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
+        styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
         <CoreTermsPrivacyLink />
       </CoreBox>
     </CoreGrid>

diff --git a/package/components/surfaces/DefaultAppBarContent.js b/package/components/surfaces/DefaultAppBarContent.js
@@ -107,11 +107,17 @@ export default function DefaultAppBarContent(props) {
     <>
       <CoreToolbar
         disableGutters={true}
-        styleClasses={[platform === WEB_PLATFORM ? CoreClasses.PADDING.PX2 : CoreClasses.PADDING.PX0, CoreClasses.FLEX.DIRECTION_ROW, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+        styleClasses={[
+          platform === WEB_PLATFORM ? CoreClasses.PADDING.PX2 : CoreClasses.PADDING.PX0,
+          CoreClasses.DISPLAY.FLEX,
+          CoreClasses.FLEX.DIRECTION_ROW,
+          CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN,
+          CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER
+        ]}
       >
 
         <CoreBox
-          styleClasses={[CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.FLEX.DIRECTION_ROW]}
+          styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.FLEX.DIRECTION_ROW, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
         >
           {leftMenuEnabled && (
             <CoreIconButton
@@ -140,7 +146,7 @@ export default function DefaultAppBarContent(props) {
         {authenticated && (
           <CoreBox
             NativeId="appBarMenuGrid"
-            styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.FLEX.DIRECTION_ROW]}
+            styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.FLEX.DIRECTION_ROW, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
           >
             {mdm?.settingMeta?.find((f) => f.name === "appBarWalet")?.value
               ?.flag && (

diff --git a/package/components/utils/CoreFade.js b/package/components/utils/CoreFade.js
@@ -53,7 +53,13 @@ export default function CoreProfilePopOver(props) {
   return (
     <CoreBox sx={{ width: "400px" }}>
       <CoreGrid
-        styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.LAYOUT.FULL_WIDTH, CoreClasses.PADDING.P1]}
+        styleClasses={[
+          CoreClasses.DISPLAY.FLEX,
+          CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER,
+          CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER,
+          CoreClasses.LAYOUT.FULL_WIDTH,
+          CoreClasses.PADDING.P1
+        ]}
       >
         <CoreAvatar
           gridProps={{ gridSize: 2 }}

diff --git a/package/components/utils/CoreLoginDetails.js b/package/components/utils/CoreLoginDetails.js
@@ -56,7 +56,7 @@ export default function CoreLoginDetails() {
         <CoreAccordionDetail>
           <CoreBox
             styleClasses={[CoreClasses.PADDING.PL1]}
-            // styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
+            // styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
           >
             <CoreTypographyCaption>Role:</CoreTypographyCaption>
 
@@ -65,14 +65,14 @@ export default function CoreLoginDetails() {
 
           <CoreBox
             styleClasses={[CoreClasses.PADDING.PL1]}
-            // styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
+            // styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
           >
             <CoreLabel>Login Information :-</CoreLabel>
           </CoreBox>
 
           <CoreBox
             styleClasses={[CoreClasses.PADDING.PL1]}
-            // styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
+            // styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
           >
             <CoreTypographyCaption>Device:</CoreTypographyCaption>
 
@@ -81,7 +81,7 @@ export default function CoreLoginDetails() {
 
           <CoreBox
             styleClasses={[CoreClasses.PADDING.PL1]}
-            // styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
+            // styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
           >
             <CoreTypographyCaption>Last Login time:</CoreTypographyCaption>
 
@@ -93,7 +93,7 @@ export default function CoreLoginDetails() {
 
           <CoreBox
             styleClasses={[CoreClasses.PADDING.PL1]}
-            // styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
+            // styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}
           >
             <CoreTypographyCaption>Location IP:</CoreTypographyCaption>
 

diff --git a/package/components/utils/CoreProfilePopOver.js b/package/components/utils/CoreProfilePopOver.js
@@ -109,6 +109,7 @@ export default function CoreProfilePopOver(props) {
       {/* <CoreGrid
         styleClasses={[
           CoreClasses.PADDING.P1,
+          CoreClasses.DISPLAY.FLEX,
           CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER,
           CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER,
           CoreClasses.LAYOUT.FULL_WIDTH,
@@ -123,7 +124,7 @@ export default function CoreProfilePopOver(props) {
 
         <CoreBox
           gridProps={{ gridSize: 8 }}
-          // styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}
+          // styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}
         >
           <CoreTypographyBody2>
             {name}

diff --git a/package/components/utils/NotificationPopOver.js b/package/components/utils/NotificationPopOver.js
@@ -13,7 +13,7 @@ export default function NotificationPopOver() {
     <>
       <CoreBox styleClasses={[CoreClasses.POPOVER.CONTENT]}>
         <CoreBox
-          styleClasses={[CoreClasses?.FLEX?.DIRECTION_ROW, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.LAYOUT.VERTICAL_CENTER]}
+          styleClasses={[CoreClasses?.DISPLAY?.FLEX, CoreClasses?.FLEX?.DIRECTION_ROW, CoreClasses?.ALIGNMENT?.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses?.LAYOUT?.VERTICAL_CENTER]}
         >
           <CoreTypographyBody1>Notifications</CoreTypographyBody1>
 

diff --git a/package/error/Error404.js b/package/error/Error404.js
@@ -19,7 +19,7 @@ export default function Error404() {
           alt="404"
         />
 
-        <CoreH6 styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
+        <CoreH6 styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
         Page not found!
         </CoreH6>
 

diff --git a/package/layout/PageContainer.js b/package/layout/PageContainer.js
@@ -201,7 +201,13 @@ export default function PageContainer(props) {
                   {authenticated && <CoreStack
                     spacing={2}
                     direction="column"
-                    styleClasses={[CoreClasses.POSITION.POSITION_FIXED, CoreClasses.POSITION.BOTTOM_0, CoreClasses.POSITION.END_0, CoreClasses.ALIGNMENT.ALIGN_ITEMS_END]}>
+                    styleClasses={[
+                      CoreClasses.POSITION.POSITION_FIXED,
+                      CoreClasses.POSITION.BOTTOM_0,
+                      CoreClasses.POSITION.END_0,
+                      CoreClasses.DISPLAY.FLEX,
+                      CoreClasses.ALIGNMENT.ALIGN_ITEMS_END
+                    ]}>
                     { Array.isArray(snackMessages) && snackMessages.map((snack) =>(
                       <CoreSnackbar 
                         styleClasses={[