Merge pull request #5758 from dasuni-30/fix/22229

Fix the responsiveness issues in the info card of the application login flow
wso2 · Mar 15, 2024 · c605d88 · c605d88
2 parents 82be30c + 12e1dfa
commit c605d88
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/.changeset/smooth-guests-return.md b/.changeset/smooth-guests-return.md
@@ -0,0 +1,8 @@
+---
+"@wso2is/theme": patch
+"@wso2is/console": patch
+"@wso2is/myaccount": patch
+"@wso2is/identity-apps-core": patch
+---
+
+Add changeset
diff --git a/.changeset/spicy-elephants-melt.md b/.changeset/spicy-elephants-melt.md
@@ -0,0 +1,11 @@
+---
+"@wso2is/react-components": patch
+"@wso2is/console": patch
+"@wso2is/myaccount": patch
+"@wso2is/common": patch
+"@wso2is/dynamic-forms": patch
+"@wso2is/form": patch
+"@wso2is/forms": patch
+---
+
+Fix the responsiveness issues in the info card
diff --git a/modules/react-components/src/components/card/info-card.tsx b/modules/react-components/src/components/card/info-card.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import Grid from "@oxygen-ui/react/Grid";
+import Box from "@oxygen-ui/react/Box";
 import { IdentifiableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import classNames from "classnames";
 import React, { FunctionComponent, MouseEvent, PropsWithChildren, ReactElement, ReactNode } from "react";
@@ -215,7 +215,7 @@ export const InfoCard: FunctionComponent<PropsWithChildren<InfoCardPropsInterfac
                                 )
                             }
                             {
-                                <Grid container justifyContent="space-between">
+                                <Box className="justify-label">
                                     <Item>
                                         { image && (
                                             <GenericIcon
@@ -240,7 +240,7 @@ export const InfoCard: FunctionComponent<PropsWithChildren<InfoCardPropsInterfac
                                             { featureStatus }
                                         </Item>
                                     ) }
-                                </Grid>
+                                </Box>
                             }
 
                             <div className="card-header-section">

diff --git a/modules/theme/src/themes/default/views/card.overrides b/modules/theme/src/themes/default/views/card.overrides
@@ -852,6 +852,11 @@
             padding: 1em;
         }
 
+        .justify-label {
+            display: flex;
+            justify-content: space-between;
+        }
+
         &.sms-provider-info-card {
             .content {
                 display: flex;