feat: make login modal and form elements responsive to different screen sizes.

Author: MaximSamorukov

src/shared/ui/LoginButton/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 import Image from 'next/image';
 import cn from 'classnames';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ModalComponent } from '@/shared/ui/Modal';
 import { LoginForm } from '../LoginForm';
 import { signOut, useSession } from 'next-auth/react';
@@ -12,6 +12,7 @@ import { getMaterials, getServices } from '@/shared/api';
 import { materialsState } from '@/shared/state/materials/state';
 import { serviceState } from '@/shared/state/services/state';
 import { Icon } from '@/shared/ui/Icon';
+import { useWindowWidth } from '@/shared/hooks';
 
 type LoginButtonProps = {
   withIcon?: boolean;
@@ -52,7 +53,21 @@ export const LoginButton = observer(({ withIcon = true }: LoginButtonProps) => {
       userState.removeUserFromState();
     }
   }, [session.data?.user]);
-
+  const windowWidth = useWindowWidth();
+  const style = useMemo(() => {
+    if (windowWidth > 520) return { height: 300 };
+    if (windowWidth >= 420)
+      return {
+        height: 'fit-content',
+        ['padding-bottom']: 10,
+        ['boz-sizing']: 'border-box',
+      };
+    return {
+      height: 'fit-content',
+      width: windowWidth - 20,
+      ['padding-bottom']: 10,
+    };
+  }, [windowWidth]);
   return (
     <div className={cn(s.itemContainer, { [s.itemContainerShort]: !withIcon })}>
       {withIcon && (
@@ -73,9 +88,7 @@ export const LoginButton = observer(({ withIcon = true }: LoginButtonProps) => {
         onClose={handleCloseModal}
         open={open}
         withControl={false}
-        style={{
-          height: 300,
-        }}
+        style={style}
       >
         <LoginForm />
       </ModalComponent>

src/shared/ui/LoginForm/SubmitButton/style.module.scss

@@ -13,6 +13,10 @@
     width: 300px;
     height: 35px;
     text-align: center;
+
+    @media (max-width: 340px) {
+      width: 100%;
+    }
   }
 
   &:hover {

src/shared/ui/LoginForm/style.module.scss

@@ -32,12 +32,12 @@
     }
   }
   &Footer {
-    height: fit-content;
-    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    height: fit-content;
+    box-sizing: border-box;
     padding: 15px;
   }
   &OtherProviders {
@@ -47,13 +47,29 @@
     justify-content: center;
     position: relative;
 
+    form {
+      @media (max-width: 390px) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        box-sizing: border-box;
+        width: 90%;
+      }
+    }
+
     &::before {
-      content: "";
+      content: '';
       width: 350px;
       height: 1px;
       background-color: #888888;
       position: absolute;
       top: -8px;
+
+      @media (max-width: 390px) {
+        width: 90%;
+      }
     }
   }
 }