From 7807e5a1e75453a4351af901bf6358f98dd6211b Mon Sep 17 00:00:00 2001
From: Rick Barrette <rickbarrette@gmail.com>
Date: Wed, 19 Aug 2026 13:56:51 -0400
Subject: [PATCH] Tweaked layout for avatar & days

---
 .../customer_appointments/_calendar_event.html.erb     |  4 ++--
 assets/stylesheets/customer_appointments.css           | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/views/customer_appointments/_calendar_event.html.erb b/app/views/customer_appointments/_calendar_event.html.erb
index d6f2595..47c2568 100644
--- a/app/views/customer_appointments/_calendar_event.html.erb
+++ b/app/views/customer_appointments/_calendar_event.html.erb
@@ -31,7 +31,7 @@
     <%# Row 1: Avatar | Title %>
     <div class="appointment-header">
       <% if appointment.user %>
-        <%= avatar(appointment.user, size: 14, class: "appointment-avatar") %>
+        <%= avatar(appointment.user, size: 25, class: "appointment-avatar") %>
       <% end %>
 
       <span class="appointment-title">
@@ -48,7 +48,7 @@
       </span>
 
       <% if duration > 1 && day_number.positive? && day_number <= duration %>
-        <small class="muted">(Day <%= day_number %> of <%= duration %>)</small>
+       <span class="appointment-days">(Day <%= day_number %> of <%= duration %>)</span>
       <% end %>
 
       <span class="appointment-hours">
diff --git a/assets/stylesheets/customer_appointments.css b/assets/stylesheets/customer_appointments.css
index 46417da..0850501 100644
--- a/assets/stylesheets/customer_appointments.css
+++ b/assets/stylesheets/customer_appointments.css
@@ -68,8 +68,8 @@ table.cal td {
 
 .appointment-avatar {
     flex-shrink: 0;
-    width: 20px;
-    height: 20px;
+    width: 25px;
+    height: 25px;
     border-radius: 3px;
     object-fit: cover;
 }
@@ -99,10 +99,14 @@ table.cal td {
 }
 
 .appointment-time,
-.appointment-hours {
+.appointment-hours{
     flex-shrink: 0;
 }
 
+.appointment-days {
+    place-items: center;
+}
+
 /* Horizontal Dividers */
 .appointment-card .appointment-divider {
     border: 0;