add responsive

src/pages/Profile/ProfilePage.module.css

@@ -1,161 +1,154 @@
 .container {
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
+    width: 100%;
+    padding: 12px;
+    box-sizing: border-box;
 }
-
 .profileboard {
-  width: 100%;
-  padding: 15px;
-  border-radius: 20px;
-  box-sizing: border-box;
+    width: 100%;
+    padding: 16px;
+    border-radius: 20px;
+    box-sizing: border-box;
 }
 
 .contentWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
 }
 
 .profilePictureContainer {
-  width: 120px;
-  height: 120px;
-  margin-bottom: 15px;
+    width: 120px;
+    height: 120px;
+    margin-bottom: 16px;
 }
 
 .profilePicture {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
 }
 
 .description {
-  width: 100%;
-  text-align: left;
-  margin-left:4%;
+    width: 100%;
+    text-align: left;
+}
+
+.headerProfile {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.description h2 {
+    font-size: 1.6rem;
+    margin-bottom: 10px;
+    white-space: nowrap;         
+    overflow: hidden;              
+    text-overflow: ellipsis;       
+}
+
+.description button {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.modifyIcon {
+    width: 22px;
+    height: 22px;
+    display: block;
+    margin: 0;
 }
 
 .topDescription {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 15px;
-}
-
-.infoBlock {
-  width: 100%;
-  padding: 10px;
-}
-
-.eventTasks {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out, opacity 0.2s ease;
-  opacity: 0;
-  padding-left: 20px;
-}
-
-.eventTasks.expanded {
-  max-height: 500px;
-  opacity: 1;
-  margin-top: 10px;
-}
-.description h2{
-    font-size:30px;
-
-}
-.profilePicture{
-    width:90%;
-}
-
-.settingsBtns {
-    display: flex;
-    gap: 5px;
-    justify-content: right;
-}
-
-@media screen and (min-width: 768px) {
-  .contentWrapper {
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  .profilePictureContainer {
-    width: 150px;
-    height: 150px;
-    margin-right: 20px;
-    margin-bottom: 0;
-  }
-
-  .description {
-    width: calc(100% - 170px);
-    margin-left:4%;
-  }
-
-  .topDescription {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .infoBlock {
-    width: 48%;
-  }
-
-  .event {
-    padding: 15px;
-  }
-  .description h2{
-    font-size:30px;
-}
-.profilePicture{
-    width:90%;
-  }
-}
-.description button{
-    width:50px;
-    height:50px;
-    
-}
-
-.headerProfile {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12px;
     margin-bottom: 20px;
 }
 
-@media screen and (min-width: 1024px) {
-  .container {
-    max-width: 100%;
-    margin: 0 auto;
-    padding: 20px;
-  }
-
-  .profileboard {
-      padding: 25px;
-  }
-
-  .profilePictureContainer {
-    width: 30%;
-    height:auto;
-  }
-  .profilePicture{
-    width:90%;
-  }
-  .description {
-    width: calc(100% - 200px);
-    margin-left:4%;
-  }
-
-  .event {
-    padding: 18px;
-  }
-  .description h2{
-    font-size:30px;
+.infoBlock {
+    width: 100%;
+    padding: 12px;
 }
+
+.eventTasks {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.2s ease;
+    opacity: 0;
+    padding-left: 16px;
+}
+
+.eventTasks.expanded {
+    max-height: 500px;
+    opacity: 1;
+    margin-top: 10px;
+}
+
+@media (min-width: 768px) {
+    .contentWrapper {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .profilePictureContainer {
+        width: 150px;
+        height: 150px;
+        margin-right: 24px;
+        margin-bottom: 0;
+    }
+
+    .description {
+        width: calc(100% - 180px);
+    }
+
+    .topDescription {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .infoBlock {
+        width: 48%;
+    }
+
+    .description h2 {
+        font-size: 1.8rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 24px;
+    }
+
+    .profileboard {
+        padding: 28px;
+    }
+
+    .profilePictureContainer {
+        width: 180px;
+        height: 180px;
+    }
+
+    .description {
+        width: calc(100% - 220px);
+    }
+
+    .description h2 {
+        font-size: 2rem;
+    }
 }