[KD] Reduce List Items Label Size

[piecanoe]

Description

Items on 'List' page often get checked off when user clicks in the blank spaces on the page. This code reduces the size of each list item's label size to prevent accidental ticking of the item checkboxes. The cursor will also change to a hand pointer when hovering over a "checkable" item

Related Issue

Closes #36
Sub-issue of #14

Acceptance Criteria

• Reduce size of the item labels to reduce the chance of accidentally checking off items.
• Add indicator to show user when they are hovering over a checkable item on the list.

Type of Changes

Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g., bug fix or enhancement are common ones.

Updates

Before

After

Testing Steps / QA Criteria

1. From home, click on a list that already has items.
2. Hover over the empty space directly to the right of the items. Try clicking. Your cursor should not change and you should not be able to check off any items.
3. Hover over one of the items. Your pointer should change into a hand pointer and the checkbox border should change color indicating the ability to check off the item. Click to check off the item.

[github-actions]

Visit the preview URL for this PR (updated for commit 1db3ce0):

https://tcl-69-smart-shopping-list--pr39-kd-reduce-list-items-nooii9t7.web.app

_{(expires Wed, 27 Mar 2024 18:34:31 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 93172cc46147b7d365c2b1b8239b61e2efb07a80}

[krsnamara]

Looks great! Nit: create .css file for List.jsx styling

[mxmason]

🔍 display: inline-flex might accomplish what you want here without getting rid of some of the benefits of flex layout.

[piecanoe]

Good call. I'll make that change!