Merge pull request #112 from uclaacm/r2dev2/fix-popup

Fix Popup on Mobile

styles/Events.module.scss

@@ -111,13 +111,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 9000; // remove a 0 to make it not cover navbar
+  z-index: 9000; // div by 10 to make it not cover navbar
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: color-mix(in srgb, var(--soul-dark), transparent 10%);
+  background: var(--soul-dark-shim);
 
   // fade-in transition
   filter: opacity(0);
@@ -140,7 +140,8 @@
   justify-content: center;
   background-color: var(--soul-dark);
   color: white;
-  width: 50vw;
+  overflow: auto;
+  width: min(30rem, 50vw);
 
   // start out popup smol, will become beeg when .mounted on popup-container
   transform-origin: center;
@@ -152,6 +153,13 @@
   padding: 1rem;
 }
 
+// on phones, popup will look like a goofy tv remote without this
+@media screen and (max-width: 600px) {
+  .popup {
+    width: calc(100% - 2rem);
+  }
+}
+
 .top-bar {
   position: absolute;
   top: 0;

styles/globals.scss

@@ -16,6 +16,12 @@
   --cyber-gold: #ffba44;
   --shadowed-light: #86652d;
   --soul-dark: #0e1116;
+
+  // pre-computed color-mix(in srgb, var(--soul-dark), transparent 10%);
+  // as older safaris don't support color-mix
+  // was done by converting --soul-dark to rgb and then adding alpha channel of 0.9
+  --soul-dark-shim: rgba(14, 17, 22, 0.9);
+
   --orange-linear: linear-gradient(85deg, #ffba44, #ff8c4c 60%);
   --logo-linear: linear-gradient(
     61.43deg,