From c85a52b8d203abb730d8ff25c6a59862c1471adb Mon Sep 17 00:00:00 2001
From: valerie-wong <74160103+valerie-wong@users.noreply.github.com>
Date: Thu, 19 Mar 2026 15:42:26 -0400
Subject: [PATCH 1/7] Fixed alumni Card responsivity for tablet/mobile

---
 .../src/components/Alumni/Alumni.module.css   | 51 +++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Alumni/Alumni.module.css b/frontend/src/components/Alumni/Alumni.module.css
index a64e1d80f..28973e0fd 100644
--- a/frontend/src/components/Alumni/Alumni.module.css
+++ b/frontend/src/components/Alumni/Alumni.module.css
@@ -229,15 +229,15 @@
 
 .infoGrid {
   display: flex;
-  gap: 44px;
+  gap: 0;
   flex-wrap: wrap;
 }
 
 .infoColumn {
-  display: flex;
+  display: flex;;
   flex-direction: column;
   gap: 10px;
-  min-width: 83px;
+  flex: 1 1 0;
 }
 
 .infoItem {
@@ -256,6 +256,8 @@
   font-size: 12px;
   font-weight: 500;
   color: #000;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .socialIcons {
@@ -278,3 +280,46 @@
 .socialLink:hover {
   color: #4183c4;
 }
+
+@media (max-width: 1024px) {
+  .infoGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto auto;
+    gap: 10px;
+  }
+
+  .infoColumn {
+    flex: unset;
+  }
+}
+
+@media (max-width: 640px) {
+  .alumniCard {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .profileImage {
+    width: 80px !important;
+    height: 80px !important;
+  }
+
+  .cardContent {
+    width: 100%;
+  }
+
+  .infoGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
+
+  .infoColumn {
+    flex: unset;
+  }
+
+  .socialIcons {
+    align-self: flex-end;
+  }
+}

From f2dc9db89c52e814ac3eaaca212577a327d15309 Mon Sep 17 00:00:00 2001
From: valerie-wong <74160103+valerie-wong@users.noreply.github.com>
Date: Thu, 19 Mar 2026 15:46:30 -0400
Subject: [PATCH 2/7] yarn format

---
 frontend/src/components/Alumni/Alumni.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Alumni/Alumni.module.css b/frontend/src/components/Alumni/Alumni.module.css
index 28973e0fd..abb8ee955 100644
--- a/frontend/src/components/Alumni/Alumni.module.css
+++ b/frontend/src/components/Alumni/Alumni.module.css
@@ -234,7 +234,7 @@
 }
 
 .infoColumn {
-  display: flex;;
+  display: flex;
   flex-direction: column;
   gap: 10px;
   flex: 1 1 0;

From a21e8a01a841acdbbce53bf65bebda2705f46b17 Mon Sep 17 00:00:00 2001
From: valerie-wong <74160103+valerie-wong@users.noreply.github.com>
Date: Mon, 13 Apr 2026 03:54:11 -0400
Subject: [PATCH 3/7] fix responsivity

---
 .../src/components/Alumni/Alumni.module.css   | 116 ++++++++---
 frontend/src/components/Alumni/Alumni.tsx     | 183 ++++++++++--------
 frontend/src/components/Alumni/AlumniCard.tsx |  56 +++---
 3 files changed, 223 insertions(+), 132 deletions(-)

diff --git a/frontend/src/components/Alumni/Alumni.module.css b/frontend/src/components/Alumni/Alumni.module.css
index abb8ee955..460337a9d 100644
--- a/frontend/src/components/Alumni/Alumni.module.css
+++ b/frontend/src/components/Alumni/Alumni.module.css
@@ -92,6 +92,10 @@
   align-items: flex-start;
 }
 
+.filterToggleWrapper {
+  display: none;
+}
+
 .filtersSidebar {
   width: 225px;
   display: flex;
@@ -228,18 +232,12 @@
 }
 
 .infoGrid {
-  display: flex;
-  gap: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
   flex-wrap: wrap;
 }
 
-.infoColumn {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  flex: 1 1 0;
-}
-
 .infoItem {
   display: flex;
   flex-direction: column;
@@ -281,23 +279,82 @@
   color: #4183c4;
 }
 
-@media (max-width: 1024px) {
-  .infoGrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto auto;
-    gap: 10px;
+
+
+.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;
   }
 
-  .infoColumn {
-    flex: unset;
+  .filtersSidebar {
+    display: none;
+  }
+
+  .topBarSpacer {
+    display: none;
   }
-}
 
-@media (max-width: 640px) {
+  .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: center;
+    align-items: left;
   }
 
   .profileImage {
@@ -311,15 +368,24 @@
 
   .infoGrid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1 1;
     gap: 10px;
   }
 
-  .infoColumn {
-    flex: unset;
-  }
-
   .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;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Alumni/Alumni.tsx b/frontend/src/components/Alumni/Alumni.tsx
index 9c6354570..5002f3238 100644
--- a/frontend/src/components/Alumni/Alumni.tsx
+++ b/frontend/src/components/Alumni/Alumni.tsx
@@ -5,6 +5,7 @@ import { Emitters } from '../../utils';
 import AlumniAPI from '../../API/AlumniAPI';
 import AlumniCard from './AlumniCard';
 import styles from './Alumni.module.css';
+import Button from '../Common/Button/Button';
 
 const AlumniMap = dynamic(() => import('./AlumniMap'), { ssr: false });
 
@@ -25,6 +26,14 @@ const Alumni: React.FC = () => {
     DEFAULT_MIN_YEAR,
     DEFAULT_MAX_YEAR
   ]);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+
+  useEffect(() => {
+    document.body.style.overflow = filtersOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [filtersOpen]);
 
   useEffect(() => {
     setIsLoading(true);
@@ -108,6 +117,84 @@ const Alumni: React.FC = () => {
     }));
   }, [alumni]);
 
+  const filterContent = (
+    <>
+      <div className={styles.appliedFilters}>
+        <Header as="h3" className={styles.filterHeader}>
+          Applied Filters
+        </Header>
+      </div>
+
+      <div className={styles.filterSection}>
+        <Dropdown
+          placeholder="Company Role"
+          fluid
+          multiple
+          selection
+          search
+          closeOnChange
+          options={jobCategoryOptions}
+          value={selectedJobCategories}
+          onChange={(_, data) => setSelectedJobCategories(data.value as string[])}
+        />
+      </div>
+
+      <div className={styles.filterSection}>
+        <Dropdown
+          placeholder="Company"
+          fluid
+          multiple
+          selection
+          search
+          closeOnChange
+          options={companyOptions}
+          value={selectedCompanies}
+          onChange={(_, data) => setSelectedCompanies(data.value as string[])}
+        />
+      </div>
+
+      <div className={styles.filterSection}>
+        <Dropdown
+          placeholder="Role on DTI"
+          fluid
+          multiple
+          selection
+          search
+          closeOnChange
+          options={dtiRoleOptions}
+          value={selectedDtiRoles}
+          onChange={(_, data) => setSelectedDtiRoles(data.value as string[])}
+        />
+      </div>
+
+      <div className={styles.appliedFilters}>
+        <Header as="h4" className={styles.filterLabel}>
+          Graduated in
+        </Header>
+        <div className={styles.yearRange}>
+          <span className={styles.yearLabel}>From</span>
+          <Input
+            type="number"
+            value={gradYearRange[0]}
+            onChange={(e) =>
+              setGradYearRange([parseInt(e.target.value, 10) || DEFAULT_MIN_YEAR, gradYearRange[1]])
+            }
+            className={styles.yearInput}
+          />
+          <span className={styles.yearLabel}>To</span>
+          <Input
+            type="number"
+            value={gradYearRange[1]}
+            onChange={(e) =>
+              setGradYearRange([gradYearRange[0], parseInt(e.target.value, 10) || DEFAULT_MAX_YEAR])
+            }
+            className={styles.yearInput}
+          />
+        </div>
+      </div>
+    </>
+  );
+
   return (
     <Container className={styles.container}>
       <Header as="h1" className={styles.header}>
@@ -140,91 +227,35 @@ const Alumni: React.FC = () => {
               <Icon name="list" />
             </button>
           </div>
+          <div className={styles.filterToggleWrapper}>
+            <Button
+              icon={<Icon name="sliders horizontal" />}
+              onClick={() => setFiltersOpen(true)}
+            />
+          </div>
         </div>
       </div>
 
       <div className={styles.contentLayout}>
-        <div className={styles.filtersSidebar}>
-          <div className={styles.appliedFilters}>
-            <Header as="h3" className={styles.filterHeader}>
-              Applied Filters
-            </Header>
-          </div>
 
-          <div className={styles.filterSection}>
-            <Dropdown
-              placeholder="Company Role"
-              fluid
-              multiple
-              selection
-              search
-              closeOnChange
-              options={jobCategoryOptions}
-              value={selectedJobCategories}
-              onChange={(_, data) => setSelectedJobCategories(data.value as string[])}
-            />
-          </div>
+        {/* Desktop sidebar */}
+        <div className={styles.filtersSidebar}>{filterContent}</div>
 
-          <div className={styles.filterSection}>
-            <Dropdown
-              placeholder="Company"
-              fluid
-              multiple
-              selection
-              search
-              closeOnChange
-              options={companyOptions}
-              value={selectedCompanies}
-              onChange={(_, data) => setSelectedCompanies(data.value as string[])}
-            />
-          </div>
-
-          <div className={styles.filterSection}>
-            <Dropdown
-              placeholder="Role on DTI"
-              fluid
-              multiple
-              selection
-              search
-              closeOnChange
-              options={dtiRoleOptions}
-              value={selectedDtiRoles}
-              onChange={(_, data) => setSelectedDtiRoles(data.value as string[])}
-            />
-          </div>
+        {/* Mobile filter modal */}
+        {filtersOpen && (
+          <div className={styles.filterOverlay} onClick={() => setFiltersOpen(false)}>
+            <div className={styles.filterModal} onClick={(e) => e.stopPropagation()}>
+              <div className={styles.filterModalHeader}>
 
-          <div className={styles.appliedFilters}>
-            <Header as="h4" className={styles.filterLabel}>
-              Graduated in
-            </Header>
-            <div className={styles.yearRange}>
-              <span className={styles.yearLabel}>From</span>
-              <Input
-                type="number"
-                value={gradYearRange[0]}
-                onChange={(e) =>
-                  setGradYearRange([
-                    parseInt(e.target.value, 10) || DEFAULT_MIN_YEAR,
-                    gradYearRange[1]
-                  ])
-                }
-                className={styles.yearInput}
-              />
-              <span className={styles.yearLabel}>To</span>
-              <Input
-                type="number"
-                value={gradYearRange[1]}
-                onChange={(e) =>
-                  setGradYearRange([
-                    gradYearRange[0],
-                    parseInt(e.target.value, 10) || DEFAULT_MAX_YEAR
-                  ])
-                }
-                className={styles.yearInput}
-              />
+                <Button icon={<Icon name="close" />} onClick={() => setFiltersOpen(false)} />
+              </div>
+              <div className={styles.filterModalBody}>{filterContent}</div>
+              <div className={styles.filterModalFooter}>
+                <Button label="Apply Filters" onClick={() => setFiltersOpen(false)} />
+              </div>
             </div>
           </div>
-        </div>
+        )}
 
         <div className={styles.listContainer}>
           {isLoading && <Loader active size="large" />}
diff --git a/frontend/src/components/Alumni/AlumniCard.tsx b/frontend/src/components/Alumni/AlumniCard.tsx
index 23e26e07f..3b3fd1044 100644
--- a/frontend/src/components/Alumni/AlumniCard.tsx
+++ b/frontend/src/components/Alumni/AlumniCard.tsx
@@ -44,41 +44,35 @@ const AlumniCard: React.FC<AlumniCardProps> = ({ alum }) => {
         </div>
 
         <div className={styles.infoGrid}>
-          <div className={styles.infoColumn}>
-            <div className={styles.infoItem}>
-              <span className={styles.infoLabel}>Company</span>
-              <span className={styles.infoValue}>{alum.company || 'N/A'}</span>
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.infoLabel}>Company Role</span>
-              <span className={styles.infoValue}>{alum.jobRole}</span>
-            </div>
+          <div className={styles.infoItem}>
+            <span className={styles.infoLabel}>Company:</span>
+            <span className={styles.infoValue}>{alum.company || 'N/A'}</span>
+          </div>
+          <div className={styles.infoItem}>
+            <span className={styles.infoLabel}>Company Role:</span>
+            <span className={styles.infoValue}>{alum.jobRole}</span>
           </div>
 
-          <div className={styles.infoColumn}>
-            <div className={styles.infoItem}>
-              <span className={styles.infoLabel}>Based in</span>
-              <span className={styles.infoValue}>{alum.location || 'N/A'}</span>
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.infoLabel}>Graduated in</span>
-              <span className={styles.infoValue}>{alum.gradYear || 'N/A'}</span>
-            </div>
+          <div className={styles.infoItem}>
+            <span className={styles.infoLabel}>Based in:</span>
+            <span className={styles.infoValue}>{alum.location || 'N/A'}</span>
+          </div>
+          <div className={styles.infoItem}>
+            <span className={styles.infoLabel}>Graduated in:</span>
+            <span className={styles.infoValue}>{alum.gradYear || 'N/A'}</span>
           </div>
 
-          <div className={styles.infoColumn}>
-            <div className={styles.infoItem}>
-              <span className={styles.infoLabel}>Role on DTI</span>
-              <span className={styles.infoValue}>
-                {alum.dtiRoles && alum.dtiRoles.length > 0 ? alum.dtiRoles.join(', ') : 'N/A'}
-              </span>
-            </div>
-            <div className={styles.infoItem}>
-              <span className={styles.infoLabel}>Subteam on DTI</span>
-              <span className={styles.infoValue}>
-                {alum.subteams && alum.subteams.length > 0 ? alum.subteams.join(', ') : 'N/A'}
-              </span>
-            </div>
+          <div className={styles.infoItem}>
+            <span className={styles.infoLabel}>Role on DTI:</span>
+            <span className={styles.infoValue}>
+              {alum.dtiRoles && alum.dtiRoles.length > 0 ? alum.dtiRoles.join(', ') : 'N/A'}
+            </span>
+          </div>
+          <div className={styles.infoItem}>
+            <span className={styles.infoLabel}>Subteam on DTI:</span>
+            <span className={styles.infoValue}>
+              {alum.subteams && alum.subteams.length > 0 ? alum.subteams.join(', ') : 'N/A'}
+            </span>
           </div>
         </div>
       </div>

From 4727f0c4300b3742d1be1c774ecb700cfacdf333 Mon Sep 17 00:00:00 2001
From: valerie-wong <74160103+valerie-wong@users.noreply.github.com>
Date: Mon, 13 Apr 2026 03:56:31 -0400
Subject: [PATCH 4/7] address comments + yarn format

---
 frontend/src/components/Alumni/Alumni.module.css | 4 +---
 frontend/src/components/Alumni/Alumni.tsx        | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/components/Alumni/Alumni.module.css b/frontend/src/components/Alumni/Alumni.module.css
index 460337a9d..76b3d8a15 100644
--- a/frontend/src/components/Alumni/Alumni.module.css
+++ b/frontend/src/components/Alumni/Alumni.module.css
@@ -279,8 +279,6 @@
   color: #4183c4;
 }
 
-
-
 .filterOverlay {
   position: fixed;
   inset: 0;
@@ -388,4 +386,4 @@
     flex-direction: row;
     gap: 2px;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Alumni/Alumni.tsx b/frontend/src/components/Alumni/Alumni.tsx
index 5002f3238..a2544cc34 100644
--- a/frontend/src/components/Alumni/Alumni.tsx
+++ b/frontend/src/components/Alumni/Alumni.tsx
@@ -237,7 +237,6 @@ const Alumni: React.FC = () => {
       </div>
 
       <div className={styles.contentLayout}>
-
         {/* Desktop sidebar */}
         <div className={styles.filtersSidebar}>{filterContent}</div>
 
@@ -246,7 +245,6 @@ const Alumni: React.FC = () => {
           <div className={styles.filterOverlay} onClick={() => setFiltersOpen(false)}>
             <div className={styles.filterModal} onClick={(e) => e.stopPropagation()}>
               <div className={styles.filterModalHeader}>
-
                 <Button icon={<Icon name="close" />} onClick={() => setFiltersOpen(false)} />
               </div>
               <div className={styles.filterModalBody}>{filterContent}</div>

From 6adf61e150e4c94e37e64e159777a38351820712 Mon Sep 17 00:00:00 2001
From: valerie-wong <74160103+valerie-wong@users.noreply.github.com>
Date: Tue, 21 Apr 2026 22:32:23 -0400
Subject: [PATCH 5/7] fixed the scroll issue!!

---
 frontend/src/components/Alumni/Alumni.tsx | 59 +++++++++++++++++------
 frontend/src/pages/index.css              |  8 +++
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Alumni/Alumni.tsx b/frontend/src/components/Alumni/Alumni.tsx
index a2544cc34..c8dcb4bc6 100644
--- a/frontend/src/components/Alumni/Alumni.tsx
+++ b/frontend/src/components/Alumni/Alumni.tsx
@@ -1,4 +1,5 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import dynamic from 'next/dynamic';
 import { Container, Header, Input, Dropdown, Icon, Loader } from 'semantic-ui-react';
 import { Emitters } from '../../utils';
@@ -27,11 +28,35 @@ const Alumni: React.FC = () => {
     DEFAULT_MAX_YEAR
   ]);
   const [filtersOpen, setFiltersOpen] = useState(false);
+  const savedScrollY = useRef(0);
+  const modalBodyRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    document.body.style.overflow = filtersOpen ? 'hidden' : '';
+    if (!filtersOpen) return;
+
+    savedScrollY.current = window.scrollY;
+    document.body.classList.add('modal-open');
+    document.body.style.top = `-${savedScrollY.current}px`;
+
+    const isInsideModal = (target: EventTarget | null) =>
+      modalBodyRef.current?.contains(target as Node) ?? false;
+
+    const lockTouch = (e: TouchEvent) => {
+      if (!isInsideModal(e.target)) e.preventDefault();
+    };
+    const lockWheel = (e: WheelEvent) => {
+      if (!isInsideModal(e.target)) e.preventDefault();
+    };
+
+    document.addEventListener('touchmove', lockTouch, { passive: false, capture: true });
+    document.addEventListener('wheel', lockWheel, { passive: false, capture: true });
+
     return () => {
-      document.body.style.overflow = '';
+      document.body.classList.remove('modal-open');
+      document.body.style.top = '';
+      window.scrollTo(0, savedScrollY.current);
+      document.removeEventListener('touchmove', lockTouch, { capture: true });
+      document.removeEventListener('wheel', lockWheel, { capture: true });
     };
   }, [filtersOpen]);
 
@@ -241,19 +266,23 @@ const Alumni: React.FC = () => {
         <div className={styles.filtersSidebar}>{filterContent}</div>
 
         {/* Mobile filter modal */}
-        {filtersOpen && (
-          <div className={styles.filterOverlay} onClick={() => setFiltersOpen(false)}>
-            <div className={styles.filterModal} onClick={(e) => e.stopPropagation()}>
-              <div className={styles.filterModalHeader}>
-                <Button icon={<Icon name="close" />} onClick={() => setFiltersOpen(false)} />
-              </div>
-              <div className={styles.filterModalBody}>{filterContent}</div>
-              <div className={styles.filterModalFooter}>
-                <Button label="Apply Filters" onClick={() => setFiltersOpen(false)} />
+        {filtersOpen &&
+          createPortal(
+            <div className={styles.filterOverlay} onClick={() => setFiltersOpen(false)}>
+              <div className={styles.filterModal} onClick={(e) => e.stopPropagation()}>
+                <div className={styles.filterModalHeader}>
+                  <Button icon={<Icon name="close" />} onClick={() => setFiltersOpen(false)} />
+                </div>
+                <div ref={modalBodyRef} className={styles.filterModalBody}>
+                  {filterContent}
+                </div>
+                <div className={styles.filterModalFooter}>
+                  <Button label="Apply Filters" onClick={() => setFiltersOpen(false)} />
+                </div>
               </div>
-            </div>
-          </div>
-        )}
+            </div>,
+            document.body
+          )}
 
         <div className={styles.listContainer}>
           {isLoading && <Loader active size="large" />}
diff --git a/frontend/src/pages/index.css b/frontend/src/pages/index.css
index 28eaedec9..0647497fc 100644
--- a/frontend/src/pages/index.css
+++ b/frontend/src/pages/index.css
@@ -19,6 +19,14 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (max-width: 768px) {
+  body.modal-open {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+  }
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

From 7a77ea39d283c0e4b14a64766ae555eacf9144fe Mon Sep 17 00:00:00 2001
From: valerie-wong <74160103+valerie-wong@users.noreply.github.com>
Date: Tue, 28 Apr 2026 15:32:36 -0400
Subject: [PATCH 6/7] right click to download

---
 .../src/components/Navbar.tsx                 | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/new-dti-website-redesign/src/components/Navbar.tsx b/new-dti-website-redesign/src/components/Navbar.tsx
index 3f9a8c44d..d0ae0f338 100644
--- a/new-dti-website-redesign/src/components/Navbar.tsx
+++ b/new-dti-website-redesign/src/components/Navbar.tsx
@@ -141,6 +141,52 @@ export default function Navbar({ demo }: NavbarProps) {
   // MOBILE ANIMATION LOGIC:
   // #######################
 
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const logoRef = useRef<HTMLImageElement>(null);
+
+  const handleLogoContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleDownload = async (format: 'svg' | 'png') => {
+    setContextMenu(null);
+
+    if (format === 'svg') {
+      const link = document.createElement('a');
+      link.href = '/wordmark.svg';
+      link.download = 'dti-logo.svg';
+      link.click();
+    } else {
+      const img = new window.Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.naturalWidth * 2;
+        canvas.height = img.naturalHeight * 2;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const link = document.createElement('a');
+        link.href = canvas.toDataURL('image/png');
+        link.download = 'dti-logo.png';
+        link.click();
+      };
+      img.src = '/wordmark.svg';
+    }
+  };
+
+  useEffect(() => {
+    if (!contextMenu) return () => {};
+    const close = () => setContextMenu(null);
+    window.addEventListener('click', close);
+    window.addEventListener('scroll', close);
+    return () => {
+      window.removeEventListener('click', close);
+      window.removeEventListener('scroll', close);
+    };
+  }, [contextMenu]);
+
   const mobileMenuRef = useRef<HTMLDivElement>(null);
 
   // mobile menu height state
@@ -183,11 +229,13 @@ export default function Navbar({ demo }: NavbarProps) {
             onClick={() => setMobileOpen(false)}
           >
             <Image
+              ref={logoRef}
               src="/wordmark.svg"
               alt="Cornell Digital Tech & Innovation logo"
               width={269}
               height={48}
               className="md:min-w-[269px] h-10 md:h-12 w-auto"
+              onContextMenu={handleLogoContextMenu}
             />
           </Link>
 
@@ -310,6 +358,26 @@ export default function Navbar({ demo }: NavbarProps) {
           </ul>
         </div>
       </div>
+      {contextMenu && (
+        <div
+          className="fixed z-[9999] bg-background-1 border border-border-1 rounded-lg shadow-lg py-1 min-w-[180px]"
+          style={{ top: contextMenu.y, left: contextMenu.x }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className="w-full text-left px-4 py-2 text-sm text-foreground-1 hover:bg-background-2 transition-colors"
+            onClick={() => handleDownload('svg')}
+          >
+            Download as SVG
+          </button>
+          <button
+            className="w-full text-left px-4 py-2 text-sm text-foreground-1 hover:bg-background-2 transition-colors"
+            onClick={() => handleDownload('png')}
+          >
+            Download as PNG
+          </button>
+        </div>
+      )}
     </>
   );
 }

From 289bcae5f295e9ccd140504b82e43cb3c4337b9a Mon Sep 17 00:00:00 2001
From: valerie-wong <74160103+valerie-wong@users.noreply.github.com>
Date: Tue, 5 May 2026 17:00:41 -0400
Subject: [PATCH 7/7] Fixed UI + added esc

---
 .../src/components/Navbar.tsx                 | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/new-dti-website-redesign/src/components/Navbar.tsx b/new-dti-website-redesign/src/components/Navbar.tsx
index b215d3454..235bd8aef 100644
--- a/new-dti-website-redesign/src/components/Navbar.tsx
+++ b/new-dti-website-redesign/src/components/Navbar.tsx
@@ -169,7 +169,12 @@ export default function Navbar({ demo }: NavbarProps) {
 
   const handleLogoContextMenu = (e: React.MouseEvent) => {
     e.preventDefault();
-    setContextMenu({ x: e.clientX, y: e.clientY });
+    const menuWidth = 180;
+    const menuHeight = 80;
+    setContextMenu({
+      x: Math.min(e.clientX, window.innerWidth - menuWidth),
+      y: Math.min(e.clientY, window.innerHeight - menuHeight)
+    });
   };
 
   const handleDownload = async (format: 'svg' | 'png') => {
@@ -202,11 +207,16 @@ export default function Navbar({ demo }: NavbarProps) {
   useEffect(() => {
     if (!contextMenu) return () => {};
     const close = () => setContextMenu(null);
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setContextMenu(null);
+    };
     window.addEventListener('click', close);
     window.addEventListener('scroll', close);
+    window.addEventListener('keydown', handleKeyDown);
     return () => {
       window.removeEventListener('click', close);
       window.removeEventListener('scroll', close);
+      window.removeEventListener('keydown', handleKeyDown);
     };
   }, [contextMenu]);
 
@@ -252,7 +262,6 @@ export default function Navbar({ demo }: NavbarProps) {
             onClick={() => setMobileOpen(false)}
           >
             <Image
-              ref={logoRef}
               src="/wordmark.svg"
               alt="Cornell Digital Tech & Innovation logo"
               width={269}
@@ -445,18 +454,18 @@ export default function Navbar({ demo }: NavbarProps) {
       </div>
       {contextMenu && (
         <div
-          className="fixed z-[9999] bg-background-1 border border-border-1 rounded-lg shadow-lg py-1 min-w-[180px]"
+          className="fixed z-[9999] bg-background-1 border-1 border-border-1 rounded-xl shadow-lg flex flex-col min-w-[180px]"
           style={{ top: contextMenu.y, left: contextMenu.x }}
           onClick={(e) => e.stopPropagation()}
         >
           <button
-            className="w-full text-left px-4 py-2 text-sm text-foreground-1 hover:bg-background-2 transition-colors"
+            className="px-4 py-3 text-foreground-3 hover:text-foreground-1 hover:bg-background-2 font-medium text-sm focusState first:rounded-t-xl last:rounded-b-xl text-left"
             onClick={() => handleDownload('svg')}
           >
             Download as SVG
           </button>
           <button
-            className="w-full text-left px-4 py-2 text-sm text-foreground-1 hover:bg-background-2 transition-colors"
+            className="px-4 py-3 text-foreground-3 hover:text-foreground-1 hover:bg-background-2 font-medium text-sm focusState first:rounded-t-xl last:rounded-b-xl text-left"
             onClick={() => handleDownload('png')}
           >
             Download as PNG