fix: wrap text on mobile displays properly

Fixes issue #6

Author: costowell

src/frontend/src/components/CarDetail.vue

@@ -6,7 +6,7 @@ import LeaveCarButton from './LeaveCarButton.vue';
 <template>
   <div class="m-1">
     <h5>Driver Comment:</h5>
-    <p v-if="car!.comment.length != 0">{{ car!.comment }}</p>
+    <p class="car-comment" v-if="car!.comment.length != 0">{{ car!.comment }}</p>
     <p v-else><i>No Comment Provided</i></p>
     <h5>Passengers:</h5>
     <ul class="no-bullets" v-if="car!.riders.length != 0">
@@ -61,4 +61,7 @@ ul.no-bullets {
   padding: 0; /* Remove padding */
   margin: 0; /* Remove margins */
 }
+.car-comment {
+  white-space: normal;
+}
 </style>

src/frontend/src/components/CarTable.vue

@@ -76,6 +76,9 @@ export default defineComponent({
 </script>
 
 <style>
+.table {
+  white-space: normal;
+}
 .collapse-enter-active,
 .collapse-leave-active {
   transition: all 0.35s ease;

src/frontend/src/components/EventCard.vue

@@ -43,4 +43,7 @@ export default defineComponent({
 .card {
   cursor: pointer;
 }
+.card-title {
+  white-space: normal;
+}
 </style>