チェックボックスの選択領域が長すぎた…

diff --git a/src/components/todo.vue b/src/components/todo.vue
index be84df4..8531291 100644 (file)
--- a/src/components/todo.vue
+++ b/src/components/todo.vue
@@ -1,20 +1,18 @@
 <template>
-  <div class="hover:bg-indigo-200 py-2">
-    
-      <input type="checkbox" 
+  <div class="hover:bg-indigo-200 py-2 flex flex-row">
+      <label class="inline-block align-middle w-1/12" :for="data.id">
+        <input type="checkbox" 
           name="remember" 
           :id="data.id" 
           v-model="data.done" 
-          class="inline-block align-middle w-1/12 h-6 w-6" 
+          class="inline-block align-middle w-full h-6 w-6" 
           @change="onCheckChange(data)"/>
-    
-    
-      <label class="inline-block align-middle w-10/12" :for="data.id">
-        <input class="bg-transparent border-b block border-gray-500 mb-2 text-gray-900 focus:outline-none focus:border-indigo-500 pb-1 w-full"
+      </label>
+
+      <input class="bg-transparent border-b block border-gray-500 mb-2 text-gray-900 focus:outline-none focus:border-indigo-500 pb-1 w-10/12"
               placeholder="やること/やりたいこと" 
               v-model="data.name"
               @change="onTextChange(data)"/>
-      </label>
 
       <button class="bg-blue-500 w-10 h-10 p-3 ml-3 text-sm font-bold tracking-wider text-white rounded-full hover:bg-red-600 inline-flex items-center justify-center"
           @click="onDelete(data)">
@@ -23,7 +21,6 @@
           <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
         </svg>
       </button>
-    
   </div>
 </template>