Fix: truncate text blocks

- Avoid did display stretching screen width

src/views/GiftedDetailsView.vue

@@ -20,7 +20,7 @@
     <!-- Heading -->
     <h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>
 
-    <h1 class="text-xl font-bold text-center mb-4">
+    <h1 class="text-xl font-bold text-center mb-4 truncate">
       <span>
         From
         {{
@@ -95,22 +95,22 @@
     </div>
     <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
-    <div class="mt-4 flex justify-between gap-2">
+    <div class="mt-4 sm:flex justify-between gap-2">
       <!-- First Column for Giver -->
-      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+      <div class="sm:flex-grow border border-slate-400 p-2 rounded-md overflow-hidden">
         <div class="flex">
           <input
             v-if="giverDid && !providedByProject"
             v-model="providedByGiver"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm mt-1 truncate">
             {{
               giverDid
                 ? "This was provided by " + giverName + "."
@@ -130,14 +130,14 @@
             v-if="providerProjectId && !providedByGiver"
             v-model="providedByProject"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm mt-1 truncate">
             {{
               providerProjectId
                 ? "This was provided by " + providerProjectName + "."
@@ -153,25 +153,25 @@
         </div>
       </div>
 
-      <div class="flex-shrink flex justify-center items-center">
+      <div class="sm:flex-shrink flex justify-center items-center">
         <font-awesome icon="arrow-right" class="fa-fw h-7" />
       </div>
 
       <!-- Third Column for Recipient -->
-      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+      <div class="sm:flex-grow border border-slate-400 p-2 rounded-md overflow-hidden">
         <div class="flex">
           <input
             v-if="recipientDid && !givenToProject"
             v-model="givenToRecipient"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm mt-1 truncate">
             {{
               recipientDid
                 ? "This was given to " + recipientName + "."
@@ -191,14 +191,14 @@
             v-if="fulfillsProjectId && !givenToRecipient"
             v-model="givenToProject"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm mt-1 truncate">
             {{
               fulfillsProjectId
                 ? "This was given to " + fulfillsProjectName + ". "