chore/.github/specs/archive/bugs-1.0.5-001.md

Bug List

Feature Bugs: .github/specs/feat-calendar-chore/feat-calendar-chore.md

Bugs

Kabab menu icon should only appear when the item is 'selected'

When a chore is 'selected' (clicked on for the first time) the kebab menu should show. The kebab menu on the chore should hide again if anywhere else is clicked except the item or it's kebab menu This is similar to how the 'edit' icon appears on penalties and rewards.

Fix — ParentView.vue:

• Add selectedChoreId = ref<string | null>(null) alongside activeMenuFor
• In the chore card-click handler, set selectedChoreId.value = item.id; clicking the same card again deselects it
• In onDocClick (the capture-phase outside-click handler), also clear selectedChoreId.value = null when clicking outside both the card and the kebab wrap
• Change the .kebab-btn from always-rendered to v-show="selectedChoreId === item.id"

Additional Test Cases With This Fix

• Kebab button is not visible before a chore card is clicked
• Kebab button becomes visible after a chore card is clicked
• Kebab button hides when clicking outside the card and kebab area (integration only — covered by onDocClick logic, not unit-testable)
• Kebab button hides when a different card is clicked

User Test Findings:

• chore-inactive::before applies an inset and background that is too dark. It should more like a gray disabled state.
• an inactive chore shows a dark kebab menu icon, so it is very hard to see since it is too dark.

Fix applied:

• ::before overlay changed from rgba(0,0,0,0.45) → rgba(160,160,160,0.45) and grayscale 60% → 80% for a lighter, more neutral gray disabled appearance
• Added :deep(.chore-inactive) .kebab-btn { color: rgba(255,255,255,0.85) } so the kebab icon remains visible against the gray overlay

---

In the scheduler, the cancel button should look like others

The cancel button doesn't follow current css design rules. It should look like other cancel buttons Incorrect cancel button: https://git.ryankegel.com/ryan/chore/attachments/a4a3a0eb-0acc-481d-8794-4d666f214e0a Correct cancel button: https://git.ryankegel.com/ryan/chore/attachments/63033ee6-35e8-4dd3-8be4-bce4a8c576fc

Fix — ScheduleModal.vue:

• Change <button class="btn-secondary" → <button class="btn btn-secondary" to use the global styles.css button classes
• Remove the local .btn-secondary and .btn-secondary:disabled CSS blocks from <style scoped>

Additional Test Cases With This Fix

• []

User Test Findings:

Fix confirmed

---

Chore scheduler needs to be modal so that it cannot be clicked out of

The chore scheduler model should not disappear when clicked outside of. It should only disappear with either Save or Cancel clicked.

Fix — ScheduleModal.vue:

• Remove @backdrop-click="$emit('cancelled')" from the <ModalDialog> opening tag
• The modal will then only close via the Save or Cancel buttons

Additional Test Cases With This Fix

• Clicking outside the ScheduleModal backdrop does not dismiss it
• Clicking Cancel dismisses the modal
• Clicking Save dismisses the modal

User Test Findings:

Fix confirmed

---

In parent view, a chore that is not on the current day has it's kebab menu 'grayed out', it should not be

The dropdown menu from the chore kebab menu should not inherit the disabled color of the item card. It gives the impression that the menu is disabled. Reference of grayed out menu: https://git.ryankegel.com/ryan/chore/attachments/0ac50dae-9b60-4cf7-a9f4-c980525d72f8

Fix — ParentView.vue and ChildView.vue: CSS opacity on a parent is always inherited and cannot be overridden by children. Replace the direct opacity + filter on .chore-inactive with a pseudo-element overlay instead, so the .chore-stamp and .chore-kebab-wrap can sit above it at full opacity:

• Change :deep(.chore-inactive) from opacity: 0.45; filter: grayscale(60%) to use position: relative only
• Add :deep(.chore-inactive::before) pseudo-element: position: absolute; inset: 0; background: rgba(0,0,0,0.45); filter: grayscale(60%); z-index: 1; pointer-events: none; border-radius: inherit
• Give .chore-stamp z-index: 3 (above the overlay)
• Give .chore-kebab-wrap z-index: 2 (above the overlay, below the stamp)

Additional Test Cases With This Fix

• []

User Test Findings:

Fix confirmed

---

Change the due by to be bigger

In both parent and child view, when a chore is scheduled and has a due time, I see the text 'Due by' in parent mode, and just the time in child mode. In both parent and child view, the text needs to be bigger: the due-label should be 0.85 rem font size. In child mode, the time a chore is due has a dark color that is hard to see. It should be the same color that is in parent view.

Fix — ParentView.vue:

• Change .due-label { font-size: 0.72rem } → font-size: 0.85rem

Fix — ChildView.vue:

• Change .due-label { font-size: 0.72rem } → font-size: 0.85rem
• Change .due-label color from var(--due-label-color, #aaa) → var(--item-points-color, #ffd166) to match parent view
• Change choreDueLabel() to return "Due by " + formatDueTimeLabel(...) instead of just the time string

Additional Test Cases With This Fix

• choreDueLabel() in ChildView returns "Due by 3:00 PM" format (not just "3:00 PM")

User Test Findings:

The text size is good, but I want to change the text color to red. Create a new color in colors.css called --text-bad-color, it should be #ef4444

Fix applied:

• Added --text-bad-color: #ef4444 to colors.css
• Updated .due-label color in both ParentView.vue and ChildView.vue to use var(--text-bad-color, #ef4444)

---

In parent mode, when a chore is too late. The banner shouldn't be 'grayed' out. Same in child mode - color should also be red in the banner

When a chore is too late, the 'TOO LATE' banner is also grayed out but it should not be. Also the font color for 'TOO LATE' needs to be consistent. Make both colors red according to colors.css

Fix — ChildView.vue:

• The TOO LATE <span class="pending"> uses the .pending class which is styled green (--pending-block-color). Change it to <span class="chore-stamp"> to match ParentView's class
• Add .chore-stamp CSS to ChildView matching ParentView's definition: color: var(--btn-danger, #ef4444)
• The grayout issue is resolved by the pseudo-element overlay fix in Bug 4 above — .chore-stamp at z-index: 3 sits above the overlay at full opacity

Fix — ParentView.vue:

• No color change needed (already color: var(--btn-danger, #ef4444))
• The grayout issue is resolved by the pseudo-element overlay fix in Bug 4 above

Additional Test Cases With This Fix

• []

User Test Findings:

chore-stamp background seems too dark, change it to rgba(34,34,34,0.65). Also give it text-shadow: var(--item-points-shadow) the TOO LATE text should not be using color --btn-danger. It should use the newly created color --text-bad-color

Fix applied:

• .chore-stamp background changed from rgba(34,34,43,0.85) → rgba(34,34,34,0.65) in both ParentView.vue and ChildView.vue
• Added text-shadow: var(--item-points-shadow) to .chore-stamp in both files
• Color changed from var(--btn-danger, #ef4444) → var(--text-bad-color, #ef4444) in both files