Fixed responsiveness of Signi page

Author: Bhupesh-mfsi

packages/messenger-widget/src/components/SignIn/SignIn.css

@@ -2,6 +2,7 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+    height: 100%;
 }
 
 .content-data-container {
@@ -30,8 +31,8 @@
 }
 
 .sign-in-logo {
-    height: 4rem !important;
-    width: fit-content !important;
+    height: auto !important;
+    width: 100% !important;
     fill: var(--text-primary-color) !important;
 }
 
@@ -86,3 +87,15 @@
         margin-top: 1rem !important;
     }
 }
+
+@media only screen and (max-height: 610px) {
+    .content-data {
+        margin-top: 1rem !important;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .home-image-container {
+        height: 0% !important;
+    }
+}

packages/messenger-widget/src/components/SignIn/SignIn.tsx

@@ -47,7 +47,7 @@ export function SignIn(props: SignInProps) {
                             props.signInImage ?? signInImage
                         })`,
                     }}
-                    className="h-100 col-lg-7 col-md-7 col-sm-12 p-0 home-image-container background-container"
+                    className="col-lg-7 col-md-7 col-sm-0 p-0 home-image-container background-container"
                 ></div>
                 <div
                     className="h-100 col-lg-5 col-md-5 col-sm-12 p-0 d-flex flex-column