fixed spacing for button on mobile

Author: BigSpaceships

src/frontend/src/components/EventDetails.vue

@@ -21,8 +21,10 @@ import EditCarButton from './EditCarButton.vue';
           <h5><b>End: </b>{{ endTime }}</h5>
         </div>
         <h5 class="card-text" v-else>{{ startTime }} - {{ endTime }}</h5>
-        <NeedsRideButton />
-        <ShareEventButton :event-id="id" />
+        <div class="d-flex flex-wrap gap-2 pb-2" >
+          <NeedsRideButton />
+          <ShareEventButton :event-id="id" />
+        </div>
       </div>
       <div class="mt-4 mb-3">
         <div class="d-flex justify-content-between align-items-center">

src/frontend/src/components/NeedsRideButton.vue

@@ -4,14 +4,14 @@ import BellSlash from './icons/BellSlash.vue';
 </script>
 
 <template>
-  <button type="button" class="btn btn-danger mb-2" @click="sendDataRemove" v-if="userInNeedsRide">
+  <button type="button" class="btn btn-danger" @click="sendDataRemove" v-if="userInNeedsRide">
     <BellSlash style="vertical-align: text-top" /> No Longer Need Ride ({{
       eventStore.selectedEvent?.needsRide.length
     }})
   </button>
   <button
     type="button"
-    class="btn btn-primary mb-2"
+    class="btn btn-primary"
     @click="sendDataAdd"
     :disabled="userInCar"
     v-else

src/frontend/src/components/ShareEventButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="btn btn-primary mx-2 mb-2" @click="copyLink">
+  <button type="button" class="btn btn-primary" @click="copyLink">
     Copy Link to Event
   </button>
 </template>