ScriptRunner script filename and waiting can use more space #3919

Activity

1. jmthomas

   added

   enhancementNew feature or requestNew feature or request

   customer

   on Sep 23, 2026
2. jmthomas

   added the

   Feature

   issue type on Sep 23, 2026
3. crawlchat commented on Sep 23, 2026

   

   crawlchatbot

   on Sep 23, 2026 – with CrawlChat

   More actions

   Looking at the code in ScriptRunner.vue, I can point at exactly where these two fixes belong:

   1️⃣ Filename box – currently fixed width, should grow with content

   <!-- line ~152 -->
   <div v-bind="props" style="width: 32rem">
     <v-select
       id="filename"
       v-model="filenameSelect"
       ...

   The wrapping <div> has a hard-coded width: 32rem, so it never grows past that even if the filename is longer (that's why there's already a tooltip at filenameSelect.length <= 45 to show the full name on hover). To make the box itself expand, swap the fixed width for a flexible one and let the parent v-row (justify="space-between") absorb the extra space, e.g.:

   <div v-bind="props" class="flex-grow-1" style="min-width: 12rem; max-width: 48rem">

   or simply drop the style and add class="flex-grow-1" to let it fill available space while the Script ID / State boxes stay fixed-width next to it.

   2️⃣ Waiting box – needs room for 4-digit seconds + hover for full value

   // computed, ~line 1173
   if (this.state === 'waiting' || this.state === 'paused') {
     return `${this.state} ${this.waitingTime}s`
   }

   <!-- line ~179 -->
   <v-text-field
     v-model="stateTimer"
     label="Script State"
     :class="['shrink', 'ml-2', 'script-state', stateColorClass]"
     style="max-width: 120px"
     ...

   max-width: 120px is tight once waitingTime hits 4 digits (e.g. waiting 9999s). Two changes:

   • Bump max-width (~150–160px) so 4-digit seconds display without clipping.
   • Wrap it in a v-tooltip (same pattern used for the filename field) bound to stateTimer, so anything beyond 4 digits still shows the full value on hover:

   <v-tooltip location="bottom" :text="stateTimer">
     <template #activator="{ props }">
       <v-text-field
         v-bind="props"
         v-model="stateTimer"
         label="Script State"
         :class="['shrink', 'ml-2', 'script-state', stateColorClass]"
         style="max-width: 150px"
         density="compact"
         variant="outlined"
         readonly
         hide-details
       />
     </template>
   </v-tooltip>

   Both changes are small CSS/template tweaks and I'm fairly confident in this approach, but I haven't run it locally — worth a quick visual check after applying to confirm the flex layout doesn't push the Script ID/State fields off-row when the filename gets very long.