fix(activity): Prevent long values from overflowing the Activity rail (#1239)

Author: srtab

daiv/activity/templates/activity/_rail_context.html

@@ -3,14 +3,14 @@
     <h5 class="text-[11px] font-semibold uppercase tracking-wider text-gray-500">Context</h5>
     <dl class="mt-3 space-y-1.5 text-sm">
         <div class="flex justify-between gap-2">
-            <dt class="text-gray-500">Repository</dt>
-            <dd class="text-right text-gray-300">{{ activity.repo_id }}</dd>
+            <dt class="shrink-0 text-gray-500">Repository</dt>
+            <dd class="min-w-0 text-right text-gray-300 break-all">{{ activity.repo_id }}</dd>
         </div>
 
         {% if activity.ref %}
         <div class="flex justify-between gap-2">
-            <dt class="text-gray-500">Branch</dt>
-            <dd class="text-right text-gray-300">{{ activity.ref }}</dd>
+            <dt class="shrink-0 text-gray-500">Branch</dt>
+            <dd class="min-w-0 text-right text-gray-300 break-all">{{ activity.ref }}</dd>
         </div>
         {% endif %}
 
@@ -39,8 +39,8 @@ <h5 class="text-[11px] font-semibold uppercase tracking-wider text-gray-500">Con
 
         {% if activity.scheduled_job %}
         <div class="flex justify-between gap-2">
-            <dt class="text-gray-500">Schedule</dt>
-            <dd class="text-right">
+            <dt class="shrink-0 text-gray-500">Schedule</dt>
+            <dd class="min-w-0 text-right break-words">
                 {% if is_schedule_owner_or_admin %}
                 <a href="{% url 'schedule_update' activity.scheduled_job.pk %}"
                    class="text-blue-300 underline decoration-blue-500/40 hover:decoration-blue-400">
@@ -66,10 +66,10 @@ <h5 class="text-[11px] font-semibold uppercase tracking-wider text-gray-500">Con
 
         {% if user.is_admin and activity.user and activity.user != user %}
         <div class="flex items-center justify-between gap-2">
-            <dt class="text-gray-500">Owner</dt>
-            <dd class="flex items-center justify-end gap-2 text-gray-300">
+            <dt class="shrink-0 text-gray-500">Owner</dt>
+            <dd class="flex min-w-0 items-center justify-end gap-2 text-gray-300">
                 {% include "accounts/_avatar.html" with user=activity.user label="Owner" %}
-                <span>{{ activity.user }}</span>
+                <span class="break-all">{{ activity.user }}</span>
             </dd>
         </div>
         {% endif %}
@@ -82,19 +82,19 @@ <h5 class="text-[11px] font-semibold uppercase tracking-wider text-gray-500">Con
         {% endif %}
 
         <div class="flex justify-between gap-2">
-            <dt class="text-gray-500">Environment</dt>
-            <dd class="text-right">
+            <dt class="shrink-0 text-gray-500">Environment</dt>
+            <dd class="min-w-0 text-right">
                 {% if activity.sandbox_environment %}
                     {% if can_edit_sandbox_environment %}
                     <a href="{% url 'sandbox_envs:edit' activity.sandbox_environment.id %}"
-                       class="text-blue-300 underline decoration-blue-500/40 hover:decoration-blue-400">
+                       class="break-words text-blue-300 underline decoration-blue-500/40 hover:decoration-blue-400">
                         {{ activity.sandbox_environment.name }}
                     </a>
                     {% else %}
-                    <span class="text-gray-300">{{ activity.sandbox_environment.name }}</span>
+                    <span class="break-words text-gray-300">{{ activity.sandbox_environment.name }}</span>
                     {% endif %}
                     {% if activity.sandbox_environment.short_summary %}
-                    <div class="text-xs text-gray-500">{{ activity.sandbox_environment.short_summary }}</div>
+                    <div class="break-all text-xs text-gray-500">{{ activity.sandbox_environment.short_summary }}</div>
                     {% endif %}
                 {% else %}
                 <span class="italic text-gray-500">{% translate "(deleted)" %}</span>