[TEAMMATES#12265] Modify minimum page height to factor in footer heig…

…ht (TEAMMATES#12406)

* Edited css main-height variable to calculate footer position based on screen width

* Added another case if the screen width is below 314px (Which will probably never happen)

* Removed extra space and end of lines

* Update src/web/app/page.component.scss by removing the footer case for 313px width and below

Co-authored-by: Zhao Jingjing <54243224+zhaojj2209@users.noreply.github.com>

* Removed 590px or above case and below 313px case for screen width

---------

Co-authored-by: Ryan Lin <ryanlin@ryans-mbp-9.wifi.local.cmu.edu>
Co-authored-by: Zhao Jingjing <54243224+zhaojj2209@users.noreply.github.com>
Co-authored-by: Ryan Lin <ryanlin@Ryans-MacBook-Pro-9.local>
Co-authored-by: Wei Qing <48304907+weiquu@users.noreply.github.com>

src/web/app/page.component.scss

@@ -14,10 +14,22 @@ nav {
 
 .main-content {
   margin-top: 50px;
-  min-height: calc(100vh - 80px);
+  min-height: calc(100vh - 102px);
   padding: 20px 70px;
 }
 
+@media (max-width: 575px) {
+  .main-content {
+    min-height: calc(100vh - 144px);
+  }
+}
+
+@media (min-width: 576px) and (max-width: 589px) {
+  .main-content {
+    min-height: calc(100vh - 123px);
+  }
+}
+
 .footer {
   padding: 5px 70px;
   color: rgba(255, 255, 255, .75);