Improve to-do items' styling

* Removed `cursor: pointer` from the parent list item. This might have
  caused confusion now that the clickable link is narrower than the list
  item.
* Apply the hover style only when the descendant link is hovered.
* Remove unnecessary CSS utils.

Changelog: changed

app/assets/javascripts/todos/components/todo_item.vue

@@ -113,7 +113,7 @@ export default {
 
 <template>
   <li
-    class="gl-border-t gl-border-b gl-relative -gl-mt-px gl-flex gl-gap-3 gl-px-5 gl-py-3 hover:gl-z-1 hover:gl-border-blue-200 hover:gl-bg-blue-50"
+    class="gl-border-t gl-border-b gl-relative -gl-mt-px gl-flex gl-gap-3 gl-px-5 gl-py-3 hover:gl-z-1 has-[>a:hover]:gl-border-blue-200 has-[>a:hover]:gl-bg-blue-50"
     :data-testid="`todo-item-${todo.id}`"
     :class="{ 'gl-bg-subtle': isDone }"
   >

app/assets/javascripts/todos/components/todos_app.vue

@@ -332,7 +332,7 @@ export default {
             name="todos"
             tag="ol"
             data-testid="todo-item-list"
-            class="gl-m-0 gl-border-collapse gl-list-none gl-p-0"
+            class="gl-m-0 gl-list-none gl-p-0"
           >
             <todo-item
               v-for="todo in todos"

app/assets/javascripts/todos/components/todos_pagination.vue

@@ -95,12 +95,12 @@ export default {
 </script>
 
 <template>
-  <div class="gl-relative gl-mt-6 gl-flex gl-justify-between md:!gl-justify-center">
+  <div class="gl-relative gl-mt-6 gl-flex gl-justify-between md:gl-justify-center">
     <gl-keyset-pagination v-bind="$props" @prev="prevPage" @next="nextPage" />
 
     <page-size-selector
       :value="pageSize"
-      class="gl-relative gl-right-0 md:gl-absolute"
+      class="gl-right-0 md:gl-absolute"
       @input="handlePageSizeChange"
     />
   </div>