add responsive

src/pages/Volunteers/VolunteersPage.module.css

@@ -1,24 +1,46 @@
 .container {
     width: 100%;
     position: relative;
+    padding: 10px;
+}
+.userName {
+  display: flex;
+  gap: 5px; 
+  font-weight: bold;
+  font-size: 1rem;
+  overflow: hidden;
 }
 
+.firstName {
+  white-space: nowrap; 
+  flex-shrink: 0;
+}
+
+.lastName {
+  white-space: nowrap;        
+  overflow: hidden;           
+  text-overflow: ellipsis;    
+  flex-shrink: 1;            
+  max-width: 100px; 
+}
+
+.usersList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
 .profileboard {
-    width: 80%;
+    width: 100%;
+    max-width: 380px; 
     display: flex;
     flex-direction: column;
     gap: 10px;
     box-sizing: border-box;
     margin: 1rem 0;
-    padding: 1rem 0.5rem;
+    padding: 12px 10px;
+    border-radius: 12px;
 }
-
-.usersList{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
 .header {
     display: flex;
     justify-content: space-between;
@@ -28,56 +50,12 @@
 
 .header h2 {
     margin: 0;
-}
-
-
-.mainContent {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    flex: 1;
-}
-
-.basicInfo {
-    flex: 1;
-}
-
-.expandedContent {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-}
-
-.textInfo {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-
-.contactInfo {
-    margin-top: 10px;
-}
-
-.contactInfo p {
-    margin: 5px 0;
-}
-
-.bottomBar {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.profilePictureContainer {
-    width: 120px;
-    height: 120px;
-    margin-right: 20px;
-}
-
-.profilePicture {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    object-fit: cover;
+    font-size: 1rem;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 70%; 
 }
 
 .expandButton {
@@ -93,13 +71,72 @@
 }
 
 .moreButtonClicked {
-    rotate: 90deg;
+    transform: rotate(90deg);
 }
 
+.mainContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.basicInfo {
+    flex: 1;
+}
+.expandedContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 10px;
+}
+.textInfo {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.contactInfo {
+    margin-top: 8px;
+}
+.contactInfo p {
+    margin: 4px 0;
+    font-size: 0.9rem;
+}
+.bottomBar {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+.profilePictureContainer {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 10px;
+}
+.profilePicture {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+@keyframes slideInMember {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
 @media screen and (min-width: 768px) {
+    .profileboard {
+        max-width: 600px;
+        padding: 16px 12px;
+    }
+    .header h2 {
+        font-size: 1.2rem;
+        max-width: 75%;
+    }
     .profilePictureContainer {
         width: 150px;
         height: 150px;
+        margin-right: 15px;
+    }
+    .expandedContent {
+        flex-direction: row;
+        gap: 15px;
     }
 }
 
@@ -107,13 +144,27 @@
     .container {
         padding: 20px;
     }
-
+    .usersList {
+        gap: 20px;
+    }
     .profileboard {
-        padding: 25px;
+        max-width: 700px;
+        padding: 20px;
+        flex-direction: column;
+    }
+    .header h2 {
+        font-size: 1.4rem;
+        max-width: 80%;
+    }
+    .expandedContent {
+        flex-direction: row;
+        gap: 20px;
     }
-
     .profilePictureContainer {
         width: 200px;
         height: auto;
     }
+    .contactInfo p {
+        font-size: 1rem;
+    }
 }