Tweaked layout for avatar & days

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">

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;