From b2e55ce599d5c81beb2a9f8962e68658eaa5ecc5 Mon Sep 17 00:00:00 2001
From: Cybernetic-Ransomware
 <71835339+Cybernetic-Ransomware@users.noreply.github.com>
Date: Tue, 15 Sep 2026 08:09:03 +0200
Subject: [PATCH 1/2] refactor(ui): add responsive table wrappers

---
 .../templates/animals/tabs/_vaccinations.html        |  2 +-
 .../templates/medical_notes/biometric_batch.html     |  2 ++
 .../templates/medical_notes/notification_list.html   |  2 ++
 static/css/custom_pico.css                           | 12 ++++++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html b/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html
index 6318c4d..cca96e6 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html
@@ -5,7 +5,7 @@ <h3>Vaccinations</h3>
 
     {% if "vaccinations" in allowed_categories %}
 
-    <div style="overflow-x: auto;">
+    <div class="table-responsive" tabindex="0" role="region" aria-label="Vaccinations table">
         <table id="vaccination-table">
             <thead>
                 <tr>
diff --git a/src/ahc/apps/medical_notes/templates/medical_notes/biometric_batch.html b/src/ahc/apps/medical_notes/templates/medical_notes/biometric_batch.html
index eaaa799..cda731d 100644
--- a/src/ahc/apps/medical_notes/templates/medical_notes/biometric_batch.html
+++ b/src/ahc/apps/medical_notes/templates/medical_notes/biometric_batch.html
@@ -19,6 +19,7 @@ <h3>Batch measurement entry</h3>
         {{ formset.management_form }}
 
         {% if rows %}
+        <div class="table-responsive" tabindex="0" role="region" aria-label="Batch measurements table">
         <table role="grid">
             <thead>
                 <tr>
@@ -48,6 +49,7 @@ <h3>Batch measurement entry</h3>
                 {% endfor %}
             </tbody>
         </table>
+        </div>
         {% else %}
         <p>No animals available. <a href="{% url 'animal_create' %}">Add an animal</a> first, or ask an owner to share one with you.</p>
         {% endif %}
diff --git a/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html b/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html
index 139320d..df008fc 100644
--- a/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html
+++ b/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html
@@ -29,6 +29,7 @@ <h4>Notification</h4>
     <p>Time of sending: {{ note.daily_timestamp }} for timezone: {{ note.timezone }}</p>
     <p>Period: {{ note.start_date }} – {% if note.end_date %}{{ note.end_date }}{% else %}ongoing{% endif %}</p>
 
+    <div class="table-responsive" tabindex="0" role="region" aria-label="Notification schedule table">
     <table>
         <thead>
             <tr>
@@ -49,6 +50,7 @@ <h4>Notification</h4>
             </tr>
         </tbody>
     </table>
+    </div>
 
     <article>
         <header>The message to send:</header>
diff --git a/static/css/custom_pico.css b/static/css/custom_pico.css
index ef03082..2c2e688 100644
--- a/static/css/custom_pico.css
+++ b/static/css/custom_pico.css
@@ -504,3 +504,15 @@ footer nav ul li > button {
   padding: 1.5rem 0;
   text-align: center;
 }
+
+/* Keeps horizontal overflow local to the table instead of stretching the page. */
+.table-responsive {
+  max-width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table-responsive:focus-visible {
+  outline: 2px solid var(--pico-primary);
+  outline-offset: 2px;
+}

From 914cff84645feef3e0c846d60a871ce0dd7d710e Mon Sep 17 00:00:00 2001
From: Cybernetic-Ransomware
 <71835339+Cybernetic-Ransomware@users.noreply.github.com>
Date: Tue, 15 Sep 2026 17:52:21 +0200
Subject: [PATCH 2/2] fix(ui): scope notification table aria-label per receiver

---
 .../templates/medical_notes/notification_list.html              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html b/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html
index df008fc..fd6724c 100644
--- a/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html
+++ b/src/ahc/apps/medical_notes/templates/medical_notes/notification_list.html
@@ -29,7 +29,7 @@ <h4>Notification</h4>
     <p>Time of sending: {{ note.daily_timestamp }} for timezone: {{ note.timezone }}</p>
     <p>Period: {{ note.start_date }} – {% if note.end_date %}{{ note.end_date }}{% else %}ongoing{% endif %}</p>
 
-    <div class="table-responsive" tabindex="0" role="region" aria-label="Notification schedule table">
+    <div class="table-responsive" tabindex="0" role="region" aria-label="Notification schedule for {{ note.receiver_name }}">
     <table>
         <thead>
             <tr>