feat: add responsiveness

client/src/app/(main)/[username]/profile/layout.module.scss

@@ -27,4 +27,27 @@
     right: 0;
     left: unset;
   }
+}
+
+.profile_row {
+  @media (max-width: 1045px) {
+    flex-direction: column;
+    width: 100%;
+    & > div {
+      width: 100%;
+    }
+  }
+}
+
+.sm_card {
+  width: 40%;
+}
+
+.lg_card {
+  width: 60%;
+}
+
+.list_card {
+  width: 40%;
+  gap: 18px;
 }

client/src/app/(main)/[username]/profile/layout.tsx

@@ -31,11 +31,11 @@ export default function Layout() {
       <>
         <Header />
         <Flex padding='0 0 15px 0' direction='column' gap='30px'>
-          <Flex gap='30px'>
+          <Flex className={styles.profile_row} gap='30px'>
             <List />
             <About />
           </Flex>
-          <Flex gap='30px'>
+          <Flex className={styles.profile_row} gap='30px'>
             <Friends />
             <Fields />
           </Flex>

client/src/app/(main)/[username]/profile/ui/about.tsx

@@ -6,6 +6,7 @@ import { TelegramIcon } from '@/shared/assets/icons/telegram';
 import { LinkedinIcon } from '@/shared/assets/icons/linkedin';
 import { useParams } from 'next/navigation';
 import { useGetUserByName } from '../lib/useGetUserByName';
+import styles from '../layout.module.scss';
 
 export const About = () => {
   const { username } = useParams();
@@ -14,7 +15,7 @@ export const About = () => {
   const linksPresent = user?.links && Object.keys(user.links).length;
   const descPresent = typeof user?.description === 'string';
   return (
-    <Card style={{ width: '60%' }}>
+    <Card className={styles.lg_card}>
       <Flex direction='column' gap='24px' height='100%'>
         <Typography size={'heading_s'} color={'greenBright'}>
           About

client/src/app/(main)/[username]/profile/ui/card.tsx

@@ -1,16 +1,15 @@
-import { type CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styles from './card.module.scss';
+import clsx from 'clsx';
 
 interface CardProps {
   children: ReactNode;
-  style?: CSSProperties;
+  className?: string;
   borderRadius?: string;
 }
 
-export const Card = ({ children, style }: CardProps) => {
-  return (
-    <div style={style} className={styles.card}>
-      {children}
-    </div>
-  );
+export const Card = ({ children, className }: CardProps) => {
+  const cls = clsx(styles.card, className);
+  console.log(cls);
+  return <div className={cls}>{children}</div>;
 };

client/src/app/(main)/[username]/profile/ui/fields.module.scss

@@ -9,4 +9,8 @@
 
 .fields_container { 
   min-height: 150px;
+}
+
+.nav_bar {
+  overflow-x: auto;
 }

client/src/app/(main)/[username]/profile/ui/fields.tsx

@@ -5,6 +5,7 @@ import styles from './fields.module.scss';
 import { Skills } from './fields/skills';
 import { WorkExperience } from './fields/work-experience';
 import { Education } from './fields/education';
+import layoutStyles from '../layout.module.scss';
 export const Fields = () => {
   const [field, setField] = useState<keyof typeof fields>('Skills');
 
@@ -17,9 +18,9 @@ export const Fields = () => {
   };
 
   return (
-    <Card style={{ width: '60%' }}>
+    <Card className={layoutStyles.lg_card}>
       <Flex direction='column' gap='24px' className={styles.fields_container}>
-        <Flex gap='16px'>
+        <Flex className={styles.nav_bar} gap='16px'>
           {Object.keys(fields).map(key => {
             const classProps = field === key ? { className: styles.selected } : {};
             return (

client/src/app/(main)/[username]/profile/ui/fields/skills.tsx

@@ -26,7 +26,7 @@ export const Skills = () => {
           return (
             <Flex key={skillName} direction='column' gap='8px'>
               <Typography>{skills[skillName].title}</Typography>
-              <Flex gap='8px'>
+              <Flex wrap='wrap' gap='8px'>
                 {user?.skills?.coreTools.map((lang: string) => <Badge key={lang} data={lang} />)}
               </Flex>
             </Flex>

client/src/app/(main)/[username]/profile/ui/friends-modal.tsx

@@ -39,8 +39,8 @@ export const FriendsModal = ({
                     <Flex gap='4px' align='center'>
                       <Typography>{friend.username ?? 'usernamehey'}</Typography>
                       <ImageLoader
-                        width={24}
-                        height={16}
+                        width={16}
+                        height={10}
                         src={getCountryFlag(friend?.country) ?? '/images/placeholder.png'}
                         alt='User flag image'
                       />

client/src/app/(main)/[username]/profile/ui/friends.tsx

@@ -6,6 +6,7 @@ import { CardSkeleton, Flex, ImageLoader, Typography } from '@/shared/ui';
 import styles from './friends.module.scss';
 import { ArrowRightIcon } from '@/shared/assets';
 import { useState } from 'react';
+import layoutStyles from '../layout.module.scss';
 import { FriendsModal } from './friends-modal';
 
 export const Friends = () => {
@@ -73,7 +74,7 @@ export const Friends = () => {
     );
   }
   return (
-    <Card style={{ width: '40%' }}>
+    <Card className={layoutStyles.sm_card}>
       <Flex direction='column' gap='24px'>
         <Typography size={'heading_s'} color={'greenBright'}>
           Friends

client/src/app/(main)/[username]/profile/ui/header.module.scss

@@ -13,10 +13,8 @@
 .header {
   background: rgba(26, 28, 34, 1);
   padding: 24px 32px 32px 32px;
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  height: 118px;
+  min-height: 118px;
+  gap: 30px;
 
   .interactable {
     align-self: start;
@@ -27,8 +25,4 @@
   display: flex;
   align-items: end;
   gap: 24px;
-  .avatar {
-  .image {
-  }
-  }
 }

client/src/app/(main)/[username]/profile/ui/header.tsx

@@ -45,7 +45,7 @@ export const Header = () => {
     <div className={styles.container}>
       <div className={styles.body}>
         <div className={styles.background}></div>
-        <div className={styles.header}>
+        <Flex align='end' justify='space-between' wrap='wrap' className={styles.header}>
           <div className={styles.profile}>
             <div className={styles.avatar}>
               <ImageLoader
@@ -66,7 +66,7 @@ export const Header = () => {
             </Flex>
           </div>
           {interactions}
-        </div>
+        </Flex>
       </div>
     </div>
   );

client/src/app/(main)/[username]/profile/ui/list.tsx

@@ -5,6 +5,7 @@ import { Row } from './row';
 import { Flex } from '@/shared/ui';
 import { calculateAge } from '@/shared/lib';
 import { useParams } from 'next/navigation';
+import styles from '../layout.module.scss';
 import { useGetUserByName } from '../lib/useGetUserByName';
 
 export const List = () => {
@@ -17,7 +18,7 @@ export const List = () => {
   }
 
   return (
-    <Card style={{ width: '40%', gap: '18px' }}>
+    <Card className={styles.list_card}>
       <Flex direction='column' gap='16px'>
         <Row icon={<UserIcon />} text={user?.skills?.speciality ?? ''} />
         <Row icon={<Star />} text={user?.experience ?? ''} />