fix: on project changes, truncate the description properly (to avoid screen zooming in) and widen the table

src/views/NewActivityView.vue

@@ -29,7 +29,7 @@
           v-if="newOffersToUser.length > 0"
           :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
           class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserAndMarkRead()"
+          @click.prevent="expandOffersToUserAndMarkRead()"
         />
       </div>
       <router-link to="/recent-offers-to-user" class="text-blue-500">
@@ -67,7 +67,7 @@
           <!-- New line that appears on hover or when the offer is clicked -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            @click.prevent="markOffersAsReadStartingWith(offer.jwtId)"
           >
             <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
             Click to keep all above as unread offers
@@ -96,7 +96,7 @@
             showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
           "
           class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserProjectsAndMarkRead()"
+          @click.prevent="expandOffersToUserProjectsAndMarkRead()"
         />
       </div>
       <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
@@ -136,7 +136,7 @@
           <!-- New line that appears on hover -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            @click.prevent="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
           >
             <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
             Click to keep all above as unread offers
@@ -167,7 +167,7 @@
             showStarredProjectChangesDetails ? 'chevron-down' : 'chevron-right'
           "
           class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandStarredProjectChangesAndMarkRead()"
+          @click.prevent="expandStarredProjectChangesAndMarkRead()"
         />
       </div>
     </div>
@@ -179,27 +179,31 @@
           :key="projectChange.plan.handleId"
           class="mt-4 relative group"
         >
-          <span class="font-medium">{{
-            projectChange.plan.name || "Unnamed Project"
-          }}</span>
-          <span
-            v-if="projectChange.plan.description"
-            class="text-gray-600 truncate"
-          >
-            - {{ projectChange.plan.description }}
-          </span>
-          <router-link
-            :to="{
-              path:
-                '/project/' + encodeURIComponent(projectChange.plan.handleId),
-            }"
-            class="text-blue-500"
-          >
-            <font-awesome
-              icon="file-lines"
-              class="pl-2 text-blue-500 cursor-pointer"
-            />
-          </router-link>
+          <div class="flex items-center gap-2">
+            <div class="flex-1 min-w-0">
+              <span class="font-medium">{{
+                projectChange.plan.name || "Unnamed Project"
+              }}</span>
+              <span
+                v-if="projectChange.plan.description"
+                class="text-gray-600 block truncate"
+              >
+                {{ projectChange.plan.description }}
+              </span>
+            </div>
+            <router-link
+              :to="{
+                path:
+                  '/project/' + encodeURIComponent(projectChange.plan.handleId),
+              }"
+              class="text-blue-500 flex-shrink-0"
+            >
+              <font-awesome
+                icon="file-lines"
+                class="text-blue-500 cursor-pointer"
+              />
+            </router-link>
+          </div>
           <!-- Show what changed -->
           <div
             v-if="getPlanDifferences(projectChange.plan.handleId)"
@@ -236,7 +240,7 @@
                     class="hover:bg-gray-50"
                   >
                     <td
-                      class="border border-gray-300 px-3 py-2 font-medium text-gray-800"
+                      class="border border-gray-300 px-3 py-2 font-medium text-gray-800 break-words"
                     >
                       {{ getDisplayFieldName(field) }}
                     </td>
@@ -259,7 +263,7 @@
           <!-- New line that appears on hover -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="
+            @click.prevent="
               markStarredProjectChangesAsReadStartingWith(
                 projectChange.plan.jwtId!,
               )