Tighten self-serve task presentation

src/components/displays/selfServe/SelfServeTaskList.vue

@@ -21,16 +21,6 @@ const isImageAttachment = (attachment: any) => (
   && attachment.content.other.match(/\.(jpg|jpeg|png|gif|webp|svg)$/i)
 );
 
-const hasTaskDescription = (task: any) => {
-  const description = task?.description;
-  if (typeof description !== "string") {
-    return !!description;
-  }
-
-  const trimmedDescription = description.trim();
-  return trimmedDescription.length > 0 && trimmedDescription !== "-";
-};
-
 const getImageAttachments = (task: any) => {
   if (!Array.isArray(task?.attachments)) {
     return [];
@@ -83,7 +73,7 @@ const formatTaskTitle = (task: any) => {
   const title = String(task?.task || "");
   const programWheelSelection = getProgramWheelSelection(task);
 
-  if (programWheelSelection === null) {
+  if (programWheelSelection === null || /\bprogram\s*#\d+\b/i.test(title)) {
     return title;
   }
 
@@ -133,7 +123,6 @@ const formatTaskTitle = (task: any) => {
               </div>
               <div class="self-serve-task-image-overlay-text">
                 <p class="self-serve-task-title"><strong>{{ formatTaskTitle(task) }}</strong></p>
-                <p v-if="hasTaskDescription(task)" class="self-serve-task-description">{{ task.description }}</p>
               </div>
             </div>
           </div>
@@ -156,8 +145,8 @@ const formatTaskTitle = (task: any) => {
           </div>
         </div>
       </template>
-      <div v-else class="columns is-mobile is-vcentered">
-        <div v-if="props.showCheckboxes" class="column is-narrow">
+      <div v-else class="self-serve-task-row">
+        <div v-if="props.showCheckboxes" class="self-serve-task-checkbox">
           <b-field>
             <b-checkbox
               size="is-large"
@@ -169,9 +158,8 @@ const formatTaskTitle = (task: any) => {
             />
           </b-field>
         </div>
-        <div class="column">
+        <div class="self-serve-task-content">
           <p><strong>{{ formatTaskTitle(task) }}</strong></p>
-          <p v-if="hasTaskDescription(task)" class="is-size-7">{{ task.description }}</p>
           <div v-if="getVisibleServices(task).length > 0" class="tags mt-2">
             <span v-for="service in getVisibleServices(task)" :key="service" class="tag is-success">{{ service }}</span>
           </div>
@@ -239,7 +227,7 @@ const formatTaskTitle = (task: any) => {
   padding: 0.65rem 0.75rem;
   display: flex;
   align-items: flex-start;
-  gap: 0.6rem;
+  gap: 0.35rem;
   pointer-events: auto;
 }
 
@@ -247,12 +235,30 @@ const formatTaskTitle = (task: any) => {
   margin-bottom: 0;
 }
 
+.self-serve-task-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.self-serve-task-checkbox {
+  flex: 0 0 auto;
+}
+
+.self-serve-task-checkbox :deep(.field) {
+  margin-bottom: 0;
+}
+
+.self-serve-task-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.self-serve-task-content p {
+  margin-bottom: 0;
+}
+
 .self-serve-task-title {
   margin: 0;
 }
-
-.self-serve-task-description {
-  margin: 0.25rem 0 0;
-  font-size: 0.85rem;
-}
 </style>