From d380e8baffe5ff40a41715fb72a7e984c6964876 Mon Sep 17 00:00:00 2001
From: klemek <klemek.dev@proton.me>
Date: Tue, 14 Jul 2026 14:19:11 +0200
Subject: [PATCH] refactor: full width edit task

---
 resources/ts/components/CronInput.vue | 12 +++---
 resources/ts/components/TaskItem.vue  | 53 ++++++++++++++-------------
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/resources/ts/components/CronInput.vue b/resources/ts/components/CronInput.vue
index 199c18f..8a4b2c5 100644
--- a/resources/ts/components/CronInput.vue
+++ b/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"
         />
diff --git a/resources/ts/components/TaskItem.vue b/resources/ts/components/TaskItem.vue
index 37cb94e..ab87a24 100644
--- a/resources/ts/components/TaskItem.vue
+++ b/resources/ts/components/TaskItem.vue
@@ -102,37 +102,38 @@ watch(task, () => {
 
 <template>
     <div class="list-row text-left">
-        <div class="content-center">
-            <input
-                :id="refreshKey.toFixed(0)"
-                type="checkbox"
-                class="checkbox"
-                :checked="checked"
-                @click.prevent="onCheck"
-            />
-        </div>
-        <div
-            v-if="!editMode"
-            class="cursor-pointer text-lg select-none"
-            @click.prevent="editMode = true"
-        >
-            <div>{{ task.name }}</div>
-            <div
-                v-if="showLastChecked && !checked && task.check_date"
-                class="font-light text-xs italic"
-            >
-                {{ $t("checked") }}
-                {{ relativeTime(task.check_date, $i18n.locale) }}
+        <template  v-if="!editMode">
+            <div class="content-center">
+                <input
+                    :id="refreshKey.toFixed(0)"
+                    type="checkbox"
+                    class="checkbox"
+                    :checked="checked"
+                    @click.prevent="onCheck"
+                />
             </div>
             <div
-                v-if="showNextReset && checked && nextReset"
-                class="font-light text-xs italic"
+                class="cursor-pointer text-lg select-none"
+                @click.prevent="editMode = true"
             >
-                {{ $t("resets") }} {{ relativeTime(nextReset, $i18n.locale) }}
+                <div>{{ task.name }}</div>
+                <div
+                    v-if="showLastChecked && !checked && task.check_date"
+                    class="font-light text-xs italic"
+                >
+                    {{ $t("checked") }}
+                    {{ relativeTime(task.check_date, $i18n.locale) }}
+                </div>
+                <div
+                    v-if="showNextReset && checked && nextReset"
+                    class="font-light text-xs italic"
+                >
+                    {{ $t("resets") }} {{ relativeTime(nextReset, $i18n.locale) }}
+                </div>
             </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 />