fix problem with "Affirm Delivery" on offer claim page, plus other look-and-feel tweaks

src/views/NewActivityView.vue

@@ -16,7 +16,7 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
-    <div class="flex justify-between">
+    <div class="flex justify-between" data-testId="showOffersToUser">
       <div>
         <span class="text-lg font-medium"
           >{{ newOffersToUser.length
@@ -28,13 +28,12 @@
         <fa
           v-if="newOffersToUser.length > 0"
           :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
-          class="cursor-pointer ml-4 text-lg"
+          class="cursor-pointer ml-4 mr-4 text-lg"
           @click="expandOffersToUserAndMarkRead()"
-          data-testid="showOffersToUser"
         />
       </div>
       <router-link to="/recent-offers-to-user" class="text-blue-500">
-        See all
+        See&nbsp;all
       </router-link>
     </div>
 
@@ -75,7 +74,10 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
-    <div class="mt-4 flex justify-between">
+    <div
+      class="mt-4 flex justify-between"
+      data-testId="showOffersToUserProjects"
+    >
       <div>
         <span class="text-lg font-medium"
           >{{ newOffersToUserProjects.length
@@ -90,13 +92,12 @@
           :icon="
             showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
           "
-          class="cursor-pointer ml-4 text-lg"
+          class="cursor-pointer ml-4 mr-4 text-lg"
           @click="expandOffersToUserProjectsAndMarkRead()"
-          data-testid="showOffersToUserProjects"
         />
       </div>
       <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
-        See all
+        See&nbsp;all
       </router-link>
     </div>