removed duplication of UI

components/MiniEventCard.module.css

@@ -23,8 +23,7 @@
   margin-bottom: calc(12rem / 16);
 }
 
-.details,
+.details {
-.mobileOpenCardToggle {
   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 {
+  .details {
-    position: relative;
+    bottom: 0;
-    margin: auto;
+    left: 0;
-    display: initial;
+    top: unset;
+    right: unset;
   }
 
-  .details,
+  .dropDownIcon {
-  .details .dropDownIcon {
+    display: none;
+  }
+
+  .card {
+    padding-bottom: calc(48rem / 16);
+  }
+
+  .nameSpacer {
     display: none;
   }
 }

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.details}>View details {dropDownIcon}</div>
-        <div className={styles.longDescription}>{description}</div>
-        <p className={styles.mobileOpenCardToggle}>View details</p>
       </summary>
+      <div>
+      {description}
+      </div>
     </details>
   );
 };