finally fixed the responsive thing on big named. made it wrap

metakgp · Jan 11, 2025 · 0085079 · 0085079
1 parent 376cbe9
commit 0085079
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
@@ -32,11 +32,12 @@ function Table() {
       {selectedProfessor && (
         <div className="table-container">
           <div className="table-caption">
-            <span>
+            <span className="space"></span>
+            {/* <span> */}
               <a href={`${selectedProfessor.prof.profile_url}`} target="_blank">
                 {selectedProfessor.prof.name}
               </a>
-            </span>
+            {/* </span> */}
             <span className="dept space">|</span>
             <span className="dept">{selectedProfessor.prof.dept_code}</span>
           </div>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -127,22 +127,31 @@ a:hover {
 
 .table-caption {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: "lighter";
-  /* max-width: 80%; */
-
   .dept {
     font-size: 2rem;
+    display: inline;
+
   }
 
   .space {
     margin: 0 8px;
+    display: inline;
   }
+  /* .space {
+    ;
+  } */
 
   a {
     font-size: 2rem;
   }
+  @media screen and (max-width: 700px) {
+    a {
+      max-width: 300px;
+      overflow-x: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
 }
 
 .table {