Fixed alumni Card responsivity for tablet/mobile (#1143)

In this PR, I adjusted the styling of the Alumni Cards to be more
responsive to different screen sizes and handle long text better.

BEFORE:
Right now you can see that depending on how long some of the words are,
the spacing of the fields is uneven.
    
![Screenshot 2026-02-24 at
8.45.06 PM.png](attachment:0f4abc19-5d4e-4cee-8076-a7f10f3db01a:Screenshot_2026-02-24_at_8.45.06_PM.png)
    
- As is, it’s not a huge issue, but when the screen changes sizes then
it starts getting weird:
    
![Screenshot 2026-02-24 at
8.49.32 PM.png](attachment:dd8290c6-4b89-4ead-8f84-df0d12e90a97:Screenshot_2026-02-24_at_8.49.32_PM.png)
    
My PR changes the layout of the cards different by screen siz

- Large/laptop: keep as image on left then 2x3 layout of fields
- Medium/tablet: keep as image on left then 3x2 layout of fields
- Small/mobile: image on top and then 3x2 layout of fields below

To test this, I would try messing with the screen widths and seeing how
they funtion. I would run through searching through alums and filters to
see if tehre are also any other edge cases that break. One thing to
note, is that on tablet, the filter bar on the left takes up a lot of
space. I believe this is out of scope for this specific task as it lies
within the Map layout as opposed to just the Alumni Card Component.

Author: valerie-wong

frontend/src/components/Alumni/Alumni.module.css

@@ -92,6 +92,10 @@
   align-items: flex-start;
 }
 
+.filterToggleWrapper {
+  display: none;
+}
+
 .filtersSidebar {
   width: 225px;
   display: flex;
@@ -234,18 +238,12 @@
 }
 
 .infoGrid {
-  display: flex;
-  gap: 44px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
   flex-wrap: wrap;
 }
 
-.infoColumn {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-width: 83px;
-}
-
 .infoItem {
   display: flex;
   flex-direction: column;
@@ -262,6 +260,8 @@
   font-size: 12px;
   font-weight: 500;
   color: #000;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .socialIcons {
@@ -284,3 +284,112 @@
 .socialLink:hover {
   color: #4183c4;
 }
+
+.filterOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+}
+
+.filterModal {
+  background: var(--bg-default);
+  width: 100%;
+  border-radius: 12px 12px 0 0;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.filterModalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-default);
+}
+
+.filterModalBody {
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.filterModalFooter {
+  padding: 16px;
+  border-top: 1px solid var(--border-default);
+  display: flex;
+}
+
+.filterModalFooter > * {
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .filterToggleWrapper {
+    display: block;
+  }
+
+  .filtersSidebar {
+    display: none;
+  }
+
+  .topBarSpacer {
+    display: none;
+  }
+
+  .searchContainer {
+    max-width: none;
+  }
+
+  .searchInput {
+    flex: 1;
+    min-width: 0;
+    width: auto;
+  }
+
+  .searchInput input {
+    min-width: 0 !important;
+    width: 100% !important;
+  }
+  .alumniCard {
+    flex-direction: column;
+    align-items: left;
+  }
+
+  .profileImage {
+    width: 80px !important;
+    height: 80px !important;
+  }
+
+  .cardContent {
+    width: 100%;
+  }
+
+  .infoGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
+
+  .socialIcons {
+    align-self: flex-end;
+  }
+}
+
+@media (max-width: 440px) {
+  .infoGrid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  .infoItem {
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+  }
+}