From 68747eac0f9367ad166b058cd7b469d8540d30cc Mon Sep 17 00:00:00 2001
From: Cole Stowell <cole@stowell.pro>
Date: Sat, 9 Nov 2024 16:31:38 -0500
Subject: [PATCH] fix: wrap text on mobile displays properly

Fixes issue #6
---
 src/frontend/src/components/CarDetail.vue | 5 ++++-
 src/frontend/src/components/CarTable.vue  | 3 +++
 src/frontend/src/components/EventCard.vue | 3 +++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/CarDetail.vue b/src/frontend/src/components/CarDetail.vue
index bef804c..e09a3cc 100644
--- a/src/frontend/src/components/CarDetail.vue
+++ b/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>
diff --git a/src/frontend/src/components/CarTable.vue b/src/frontend/src/components/CarTable.vue
index 27ce24f..1726049 100644
--- a/src/frontend/src/components/CarTable.vue
+++ b/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;
diff --git a/src/frontend/src/components/EventCard.vue b/src/frontend/src/components/EventCard.vue
index 4bbfdc7..4f1756c 100644
--- a/src/frontend/src/components/EventCard.vue
+++ b/src/frontend/src/components/EventCard.vue
@@ -43,4 +43,7 @@ export default defineComponent({
 .card {
   cursor: pointer;
 }
+.card-title {
+  white-space: normal;
+}
 </style>