From c2dc9ba62c6491546d6d98dcc9806ea1edafcd6a Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Tue, 28 Mar 2023 21:14:42 +1100
Subject: [PATCH] Try to reduce text overflow on monthly workout overview

---
 templates/partials/page/calendar.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/templates/partials/page/calendar.html b/templates/partials/page/calendar.html
index 33a7089..991aade 100644
--- a/templates/partials/page/calendar.html
+++ b/templates/partials/page/calendar.html
@@ -97,19 +97,23 @@
         get_first_element_from_list_with_matching_attribute(person['Workouts'],
         'StartDate',
         date) %}
-        <div class="{% if date == datetime.today().date() %}rounded-md border-4 border-green-50{% endif %} border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2 cursor-pointer {% if selected_date.month != date.month %}bg-gray-100{% endif %}"
+        <div class="{% if date == datetime.today().date() %}rounded-md border-4 border-green-50{% endif %} border flex flex-col h-50 sm:h-40 md:h-30 lg:h-30 mx-auto mx-auto overflow-hidden w-full pt-2 pl-1 cursor-pointer {% if selected_date.month != date.month %}bg-gray-100{% endif %}"
             {% if workout %}
             hx-get="{{ url_for('get_workout_modal', person_id=person['PersonId'], workout_id=workout['WorkoutId']) }}"
             hx-target='body' hx-swap='beforeend' {% endif %}>
             <div class="top h-5 w-full">
                 <span class="text-gray-500 font-semibold">{{ date.day }}</span>
             </div>
-            <div class="bottom flex-grow h-30 py-1 w-full">
+            <div class="bottom flex-grow py-1 w-full">
                 {% if workout['TopSets']|length > 0 %}
                 {% for topset in workout['TopSets'] %}
-                <button class="flex items-center flex-shrink-0 h-5 px-1 text-xs">
-                    <span class="ml-2 font-medium leading-none truncate">{{ topset['ExerciseName'] }}</span>
-                    <span class="ml-2 font-light leading-none">{{ topset['Repetitions'] }} x {{ topset['Weight']
+                <button
+                    class="flex flex-col xl:flex-row items-start lg:items-center flex-shrink-0 px-0 sm:px-0.5 md:px-0.5 lg:px-0.5 text-xs">
+                    <span class="ml-0 sm:ml-0.5 md:ml-2 lg:ml-2 font-medium leading-none truncate">{{
+                        topset['ExerciseName'] }}</span>
+                    <span class="ml-0 sm:ml-0.5 md:ml-2 lg:ml-2 font-light leading-none">{{ topset['Repetitions'] }} x
+                        {{
+                        topset['Weight']
                         }}kg</span>
                 </button>
                 {% endfor %}