refactor: full width edit task

resources/ts/components/CronInput.vue

@@ -62,7 +62,7 @@ watch(cron, () => {
 
 <template>
     <div class="flex gap-2">
-        <select v-model="cronType" class="select" @change="onChangeCronType">
+        <select v-model="cronType" class="select flex-1" @change="onChangeCronType">
             <option :value="CronType.ONE_TIME">
                 {{ $t("cron.type.one_time") }}
             </option>
@@ -85,7 +85,7 @@ watch(cron, () => {
         <select
             v-if="cronType === CronType.EVERY_DAY"
             v-model="cronValue"
-            class="select"
+            class="select flex-1"
             @change="onChangeCronValue"
         >
             <option
@@ -99,7 +99,7 @@ watch(cron, () => {
         <select
             v-if="cronType === CronType.EVERY_WEEK"
             v-model="cronValue"
-            class="select"
+            class="select flex-1"
             @change="onChangeCronValue"
         >
             <option
@@ -113,7 +113,7 @@ watch(cron, () => {
         <select
             v-if="cronType === CronType.EVERY_MONTH"
             v-model="cronValue"
-            class="select"
+            class="select flex-1"
             @change="onChangeCronValue"
         >
             <option
@@ -136,7 +136,7 @@ watch(cron, () => {
         <select
             v-if="cronType === CronType.EVERY_YEAR"
             v-model="cronValue"
-            class="select"
+            class="select flex-1"
             @change="onChangeCronValue"
         >
             <option
@@ -151,7 +151,7 @@ watch(cron, () => {
             v-if="cronType === CronType.SPECIFIC"
             v-model="rawCron"
             type="text"
-            class="input font-mono"
+            class="input font-mono flex-1"
             :class="valid ? '' : 'input-error'"
             @input="onInputRawCron"
         />

resources/ts/components/TaskItem.vue

@@ -102,6 +102,7 @@ watch(task, () => {
 
 <template>
     <div class="list-row text-left">
+        <template  v-if="!editMode">
             <div class="content-center">
                 <input
                     :id="refreshKey.toFixed(0)"
@@ -112,7 +113,6 @@ watch(task, () => {
                 />
             </div>
             <div
-            v-if="!editMode"
                 class="cursor-pointer text-lg select-none"
                 @click.prevent="editMode = true"
             >
@@ -131,8 +131,9 @@ watch(task, () => {
                     {{ $t("resets") }} {{ relativeTime(nextReset, $i18n.locale) }}
                 </div>
             </div>
+        </template>
         <template v-else>
-            <div class="flex flex-col gap-2">
+            <div class="list-col-grow flex flex-col gap-2">
                 <div class="flex justify-evenly">
                     <button class="btn btn-square me-1" @click="onClose">
                         <x-icon />