Make weekly/monthly view more responsive

app/static/css/tailwind.css

@@ -1111,6 +1111,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1511,6 +1515,12 @@ video {
   text-decoration-line: underline;
 }
 
+@media (min-width: 640px) {
+  .sm\:p-0 {
+    padding: 0px;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:w-auto {
     width: auto;
@@ -1523,6 +1533,14 @@ video {
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .md\:p-2 {
+    padding: 0.5rem;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
 }
 
 @media (min-width: 1024px) {

app/templates/dashboard.html

@@ -228,22 +228,22 @@
         </div>
 
         <!-- Weekly View -->
-        <div x-show="activeView === 'weekly'" class="grid grid-cols-7 gap-4 text-center">
+        <div x-show="activeView === 'weekly'" class="grid grid-cols-7 text-center">
             {% set today = date.today() %}
             {% for i in range(7) %}
             {% set day = today - timedelta(days=today.weekday() - i) %}
-            <div class="border p-4 rounded-lg bg-gray-50  gap-x-4">
+            <div class="border p-1 md:p-4 bg-gray-50">
-                <div class="text-sm font-bold text-gray-800">{{ day.strftime('%A, %b %d') }}</div>
+                <div class="text-sm font-bold text-gray-800">{{ day.strftime('%a, %b %d') }}</div>
                 {% if day in readings_by_date %}
                 {% for reading in readings_by_date[day]|sort(attribute="timestamp", reverse = True) %}
                 <a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
-                    class="block mt-2 p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
+                    class="block mt-2 p-0 md:p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
                     <p class="text-xs font-medium text-green-800">
                         {{ reading.systolic }}/{{ reading.diastolic }} mmHg
                     </p>
-                    <p class="text-xs text-gray-600">{{ reading.heart_rate }} bpm</p>
+                    <p class="text-xs text-gray-600 mt-1">{{ reading.heart_rate }} bpm</p>
                     <!-- Timestamp -->
-                    <div class="text-xs text-gray-500 mt-2">
+                    <div class="text-xs text-gray-500 mt-1">
                         {{ reading.timestamp.strftime('%I:%M %p') }}
                     </div>
                 </a>
@@ -264,7 +264,7 @@
             </div>
 
             <!-- Day Headers -->
-            <div class="grid grid-cols-7 gap-4 text-center">
+            <div class="grid grid-cols-7 text-center">
                 <div class="font-semibold text-gray-700">Sun</div>
                 <div class="font-semibold text-gray-700">Mon</div>
                 <div class="font-semibold text-gray-700">Tue</div>
@@ -275,7 +275,7 @@
             </div>
 
             <!-- Calendar Grid -->
-            <div class="grid grid-cols-7 gap-4 text-center">
+            <div class="grid grid-cols-7 text-center">
                 {% set days_in_month = (current_date.replace(month=current_date.month % 12 + 1, day=1) -
                 timedelta(days=1)).day %}
                 {% set first_weekday = current_date.weekday() %}
@@ -288,30 +288,21 @@
                 <!-- Days of the Month -->
                 {% for day in range(1, days_in_month + 1) %}
                 {% set current_day = current_date.replace(day=day) %}
-                <div class="border p-4 rounded-lg bg-gray-50 relative">
+                <div class="border p-1 md:p-4 rounded-lg bg-gray-50 relative">
                     <!-- Day Label -->
                     <div class="text-sm font-bold text-gray-800 text-left">{{ current_day.day }}</div>
 
-                    <!-- Red Heart for Days with Readings -->
-                    {% if current_day in readings_by_date %}
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
-                        class="w-5 h-5 text-red-500 absolute top-2 right-2">
-                        <path
-                            d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-                    </svg>
-                    {% endif %}
-
                     <!-- Readings -->
                     {% if current_day in readings_by_date %}
                     {% for reading in readings_by_date[current_day]|sort(attribute="timestamp", reverse = True) %}
                     <a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
-                        class="block mt-2 p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
+                        class="block mt-2 p-0 md:p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
                         <p class="text-xs font-medium text-green-800">
                             {{ reading.systolic }}/{{ reading.diastolic }} mmHg
                         </p>
-                        <p class="text-xs text-gray-600">{{ reading.heart_rate }} bpm</p>
+                        <p class="text-xs text-gray-600 mt-1">{{ reading.heart_rate }} bpm</p>
                         <!-- Timestamp -->
-                        <div class="text-xs text-gray-500 mt-2">
+                        <div class="text-xs text-gray-500 mt-1">
                             {{ reading.timestamp.strftime('%I:%M %p') }}
                         </div>
                     </a>