Mobile Mini Event Card (#97)

Closes #38

Currently short description is still visible when card is closed

Co-authored-by: Linna Luo <linnaluo18@gmail.com>
Reviewed-on: #97
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: l42luo <l42luo@localhost>
Co-committed-by: l42luo <l42luo@localhost>

components/MiniEventCard.module.css

@@ -48,3 +48,24 @@
 .dropDownIcon {
   fill: var(--primary-accent);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .details {
+    bottom: 0;
+    left: 0;
+    top: unset;
+    right: unset;
+  }
+
+  .dropDownIcon {
+    display: none;
+  }
+
+  .card {
+    padding-bottom: calc(48rem / 16);
+  }
+
+  .nameSpacer {
+    display: none;
+  }
+}

components/MiniEventCard.tsx

@@ -34,10 +34,8 @@ export const MiniEventCard: React.FC<Props> = ({
           </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>
-
-        <p className={styles.details}>View details {dropDownIcon}</p>
+        <div className={styles.details}>View details {dropDownIcon}</div>
       </summary>
-
       <div>{description}</div>
     </details>
   );