fix layout

Author: mdvanes

README.md

@@ -40,3 +40,5 @@ Settings for Github Actions:
   - TWITTER_USER_NAME
   - YOUTUBE_API_KEY
   - YOUTUBE_PLAYLIST_ID
+  - MASTODON_ACCESS_TOKEN
+  - MASTODON_ID

components/TootCard/TootCard.module.scss

@@ -22,6 +22,12 @@
   div > a {
     display: block;
     margin-bottom: 0.5rem;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   @media (min-width: $main-width) {
@@ -34,12 +40,12 @@
   display: flex;
   gap: 0.7rem;
   cursor: default;
-  align-items: start;
+  align-items: flex-start;
 
   > span {
     display: flex;
     gap: 0.3rem;
-    align-items: start;
+    align-items: flex-start;
     padding: 0.2rem;
     border-radius: 4px;
 

components/UpcomingMeetupCard/UpcomingMeetupCard.module.scss

@@ -1,16 +1,21 @@
 @import "../constants";
 
 .upcoming-meetup-card {
-  border-radius: 4px;
-  background-color: $highlight-card-bg;
-  padding: 1rem;
-  text-align: center;
+  display: block;
 
-  &:hover {
-    background-color: lighten($highlight-card-bg, 10%);
+  section {
+    border-radius: 4px;
+    background-color: $highlight-card-bg;
+    padding: 1rem;
+    text-align: center;
+
+    &:hover {
+      background-color: lighten($highlight-card-bg, 10%);
+    }
   }
 
-  h2, h3 {
+  h2,
+  h3 {
     margin-top: 0;
   }
 
@@ -19,16 +24,19 @@
   //   padding: 1rem;
   // }
 
-  > p > a {
+  section > p > button {
     display: inline-block;
     background-color: $orange;
     border-radius: 4px;
+    border: none;
     padding: 8px;
+    font-size: 16px;
     font-weight: bold;
     color: black;
     width: 100%;
     max-width: $aside-width;
     text-align: center;
+    cursor: pointer;
 
     @media (min-width: $main-width) {
       // width: $aside-width - 30px;

components/UpcomingMeetupCard/UpcomingMeetupCard.tsx

@@ -18,8 +18,8 @@ const formatDate = (time: string) =>
 const UpcomingMeetupCard: FC<IUpcomingMeetupCardProps> = ({ meetup }) => {
   const { link, featured_photo, name, time } = meetup;
   return (
-    <a href={link}>
-      <section className={styles["upcoming-meetup-card"]}>
+    <a href={link} className={styles["upcoming-meetup-card"]}>
+      <section>
         <h2>MEETUP</h2>
         <h3>{name}</h3>
         {featured_photo && (
@@ -31,7 +31,7 @@ const UpcomingMeetupCard: FC<IUpcomingMeetupCardProps> = ({ meetup }) => {
           />
         )}
         <p>
-          <a href={link}>SIGN UP FOR {formatDate(time).toUpperCase()}</a>
+          <button>SIGN UP FOR {formatDate(time).toUpperCase()}</button>
         </p>
       </section>
     </a>

components/UpcomingMeetupList/UpcomingMeetupList.module.scss

@@ -1,6 +1,8 @@
 @import "../constants";
 
 .upcoming-meetup-list {
+  flex-direction: column;
+  gap: 1rem;
   padding: 1rem;
   width: 100%;