From 813d8ca3e410637b925572fa7edd7d431978833b Mon Sep 17 00:00:00 2001
From: Saahith <22772542+saahithjanapati@users.noreply.github.com>
Date: Thu, 25 Sep 2025 10:22:24 -0400
Subject: [PATCH 1/2] Improve catalog table responsiveness

---
 src/Catalog.css    | 44 +++++++++++++++++++++++++++++++++++++++++++-
 src/CatalogPage.js | 16 +++++++++++-----
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/Catalog.css b/src/Catalog.css
index 49037ad..a37dd64 100644
--- a/src/Catalog.css
+++ b/src/Catalog.css
@@ -187,6 +187,26 @@ body{
 .button-container{
   display: flex;
   justify-content: flex-end;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.catalog-link{
+  display: inline-flex;
+  text-decoration: none;
+}
+
+.catalog-link .catalog-button{
+  width: 100%;
+}
+
+.course-table-container{
+  width: 100%;
+  overflow-x: auto;
+}
+
+.course-table-container .custom-table{
+  min-width: 600px;
 }
 
 
@@ -537,7 +557,16 @@ tr.title-header:hover th{
   .catalogPage .catalog-button {
     text-align: right;
     font-size: 8px;
-    white-space: nowrap; 
+    white-space: nowrap;
+  }
+
+  .catalogPage .button-container{
+    justify-content: flex-start;
+    gap: 0.25rem;
+  }
+
+  .catalogPage .external-buttons{
+    width: auto;
   }
 
   .toggle-button {
@@ -629,6 +658,19 @@ tr.title-header:hover th{
   .section-title{
     font-size: 20px;
   }
+  .catalogPage .course-table-container{
+    margin-bottom: 1.5rem;
+  }
+  .catalogPage .button-container{
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .catalogPage .button-container .catalog-link{
+    width: 100%;
+  }
+  .catalogPage .catalog-button{
+    width: 100%;
+  }
   .catalog-section {
     padding: 10px; /* Add some padding to the section for narrower screens */
   }
diff --git a/src/CatalogPage.js b/src/CatalogPage.js
index 48859dc..f06d6d1 100644
--- a/src/CatalogPage.js
+++ b/src/CatalogPage.js
@@ -285,10 +285,16 @@ function CatalogPage() {
             <th colSpan="4" className='course-title' onClick={() => toggleTableExpansion(tableKey)}>{course.subject} {course.catalog_number}: {course.descr}</th>
 
             <th className="external-buttons">
-              <div className = "button-container">
-              <th className="sis-button"><a target="_blank" rel="noopener noreferrer" href={getSisLink(course.subject, course.catalog_number) }><button className="catalog-button">SIS</button></a></th>
-              <th><a target="_blank" rel="noopener noreferrer" href={getCourseForumLink(course.subject, course.catalog_number)}><button className="catalog-button">theCourseForum</button></a> </th>
-              <th><a target="_blank" rel="noopener noreferrer" href={getVAGradesLink(course.subject, course.catalog_number)}> <button className="catalog-button hide-button">VA Grades</button></a></th>
+              <div className="button-container">
+                <a className="catalog-link" target="_blank" rel="noopener noreferrer" href={getSisLink(course.subject, course.catalog_number)}>
+                  <button className="catalog-button">SIS</button>
+                </a>
+                <a className="catalog-link" target="_blank" rel="noopener noreferrer" href={getCourseForumLink(course.subject, course.catalog_number)}>
+                  <button className="catalog-button">theCourseForum</button>
+                </a>
+                <a className="catalog-link hide-button" target="_blank" rel="noopener noreferrer" href={getVAGradesLink(course.subject, course.catalog_number)}>
+                  <button className="catalog-button">VA Grades</button>
+                </a>
               </div>
             </th>
           </tr>
@@ -326,7 +332,7 @@ function CatalogPage() {
         }
 
           elements.push(
-            <div>
+            <div className="course-table-container">
               <table className={'custom-table'} id={tableKey}>
                 <tbody>{table}</tbody>
               </table>

From a4374b147a45a19b06ab62ca6ebd16d6fbd87662 Mon Sep 17 00:00:00 2001
From: Saahith <22772542+saahithjanapati@users.noreply.github.com>
Date: Thu, 25 Sep 2025 11:25:21 -0400
Subject: [PATCH 2/2] Adjust catalog table width for mobile

---
 src/Catalog.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Catalog.css b/src/Catalog.css
index a37dd64..9dcda94 100644
--- a/src/Catalog.css
+++ b/src/Catalog.css
@@ -203,6 +203,7 @@ body{
 .course-table-container{
   width: 100%;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .course-table-container .custom-table{
@@ -292,11 +293,11 @@ tr{
 
 
 .catalogPage .custom-table {
-  width: 100%;
+  width: clamp(600px, 100%, 1000px);
   max-width: 1000px; /* Limit the table width on large screens */
   border: 1px solid #fff;
   border-radius: 3px;
-  table-layout: fixed;
+  table-layout: auto;
 }
 
 .custom-table th, .custom-table td {