From 3e700c7a3c265aa2375556b22da6a13ae8ec52fb Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Mon, 16 Aug 2021 16:35:22 -0400
Subject: [PATCH] removed duplication of UI

---
 components/MiniEventCard.module.css | 35 +++++++++++++----------------
 components/MiniEventCard.tsx        |  7 +++---
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index d9f2637a..59e1bbec 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -23,8 +23,7 @@
   margin-bottom: calc(12rem / 16);
 }
 
-.details,
-.mobileOpenCardToggle {
+.details {
   position: absolute;
   top: 0;
   right: 0;
@@ -34,22 +33,10 @@
   font-size: calc(14rem / 16);
 }
 
-.mobileOpenCardToggle {
-  display: none;
-}
-
 .card[open] .shortDescription {
   display: none;
 }
 
-.longDescription {
-  display: none;
-}
-
-.card[open] .longDescription {
-  display: initial;
-}
-
 .card[open] .dropDownIcon {
   transform: rotate(180deg);
 }
@@ -63,14 +50,22 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
-  .mobileOpenCardToggle {
-    position: relative;
-    margin: auto;
-    display: initial;
+  .details {
+    bottom: 0;
+    left: 0;
+    top: unset;
+    right: unset;
   }
 
-  .details,
-  .details .dropDownIcon {
+  .dropDownIcon {
+    display: none;
+  }
+
+  .card {
+    padding-bottom: calc(48rem / 16);
+  }
+
+  .nameSpacer {
     display: none;
   }
 }
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index 3b5bccc0..c1dc4eff 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -34,10 +34,11 @@ 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.longDescription}>{description}</div>
-        <p className={styles.mobileOpenCardToggle}>View details</p>
+        <div className={styles.details}>View details {dropDownIcon}</div>
       </summary>
+      <div>
+      {description}
+      </div>
     </details>
   );
 };