From f510dea09dbfac52dee446835b7a3ac054ca091c Mon Sep 17 00:00:00 2001
From: Ryan Kegel <ryan.kegel@gmail.com>
Date: Wed, 20 May 2026 00:03:12 -0400
Subject: [PATCH] style: Refactor routine selection and item styles for
 improved layout and responsiveness

---
 .../components/child/RoutineAssignView.vue    | 66 ++++++-------------
 1 file changed, 19 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/child/RoutineAssignView.vue b/frontend/src/components/child/RoutineAssignView.vue
index 4b0124d..c1182ab 100644
--- a/frontend/src/components/child/RoutineAssignView.vue
+++ b/frontend/src/components/child/RoutineAssignView.vue
@@ -149,37 +149,30 @@ function onCancel() {
 }
 
 .routine-selection {
-  flex: 0 1 auto;
-  max-width: 480px;
-  width: 100%;
-  max-height: calc(100vh - 4.5rem);
-  overflow-y: auto;
-  margin: 0.2rem 0 0 0;
   display: flex;
   flex-direction: column;
-  gap: 0.7rem;
-  background: var(--list-bg);
-  padding: 0.2rem;
-  border-radius: 12px;
+  gap: 0.5rem;
+  width: 100%;
+  max-width: 500px;
 }
 
 .routine-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  border: 2px outset var(--list-item-border-good);
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 2px solid var(--list-item-border-good);
   border-radius: 8px;
-  padding: 0.2rem 1rem;
   background: var(--list-item-bg-good);
-  font-size: 1.05rem;
-  font-weight: 500;
-  transition: border 0.18s;
-  margin-bottom: 0.2rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
-  box-sizing: border-box;
   cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.routine-item:hover {
+  background: var(--list-item-bg-good-hover, var(--list-item-bg-good));
+  border-color: var(--list-item-border-good-hover, var(--list-item-border-good));
 }
 
 .routine-item input[type='checkbox'] {
@@ -192,22 +185,19 @@ function onCancel() {
 }
 
 .routine-item img {
-  width: 36px;
-  height: 36px;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 6px;
   object-fit: cover;
-  border-radius: 8px;
-  margin-right: 0.7rem;
-  background: var(--list-image-bg);
-  flex-shrink: 0;
 }
 
-.name {
+.routine-item .name {
   flex: 1;
   text-align: left;
   font-weight: 600;
 }
 
-.value {
+.routine-item .value {
   min-width: 60px;
   text-align: right;
   font-weight: 600;
@@ -230,22 +220,4 @@ function onCancel() {
   transition: background 0.18s;
   min-width: 120px;
 }
-
-.btn-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.round-btn {
-  background: none;
-  border: none;
-  color: var(--btn-primary);
-  font-weight: 600;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.round-btn:hover {
-  opacity: 0.8;
-}
 </style>