added mobile styling for View Details toggle for card

components/MiniEventCard.module.css

@@ -23,7 +23,8 @@
   margin-bottom: calc(12rem / 16);
 }
 
-.details {
+.details,
+.mobileOpenCardToggle {
   position: absolute;
   top: 0;
   right: 0;
@@ -33,10 +34,22 @@
   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);
 }
@@ -48,3 +61,19 @@
 .dropDownIcon {
   fill: var(--blue-2);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .mobileOpenCardToggle {
+    position: relative;
+    margin: auto;
+    display: initial;
+  }
+
+  .details .dropDownIcon {
+    display: none;
+  }
+
+  .details {
+    display: none;
+  }
+}

components/MiniEventCard.tsx

@@ -32,11 +32,10 @@ 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>
       </summary>
-
-      <div>{description}</div>
     </details>
   );
 };