From 5223c2fd189332cddd3ccdae6192eed131afaf7e Mon Sep 17 00:00:00 2001
From: Cybernetic-Ransomware
 <71835339+Cybernetic-Ransomware@users.noreply.github.com>
Date: Sat, 4 Jul 2026 21:04:09 +0200
Subject: [PATCH 1/2] fix(frontend): 1440px fixes

---
 .../animals/templates/animals/tabs/_diet.html |  4 +-
 .../templates/animals/tabs/_mainpage.html     |  2 +-
 .../templates/animals/tabs/_medications.html  |  4 +-
 .../templates/animals/tabs/_notes.html        |  6 +-
 .../templates/animals/tabs/_ownership.html    |  6 +-
 .../templates/animals/tabs/_vaccinations.html |  2 +-
 .../animals/templates/animals/tabs/_vet.html  |  4 +-
 .../homepage/templates/homepage/base.html     | 50 +++++++------
 .../homepage/templates/homepage/homepage.html | 17 ++---
 static/css/custom_pico.css                    | 74 +++++++++++++++++--
 10 files changed, 115 insertions(+), 54 deletions(-)

diff --git a/src/ahc/apps/animals/templates/animals/tabs/_diet.html b/src/ahc/apps/animals/templates/animals/tabs/_diet.html
index 6cb8f23..80864a3 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_diet.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_diet.html
@@ -15,7 +15,7 @@ <h4 class="button secondary outline section-header" role="button" tabindex="0">E
     {% endif %}
 
     <div class="grid">
-        <a role="button" class="secondary outline"
+        <a role="button"
            href="{% url 'note_create' pk=animal.id %}?type_of_event=diet_note"
            hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=diet_note"
            hx-target="#modal-body"
@@ -43,7 +43,7 @@ <h4 class="button secondary outline section-header" role="button" tabindex="0">E
         </ol>
     </section>
     {% else %}
-    <p>No diet notes recorded yet.</p>
+    <p class="empty-state">No diet notes recorded yet.</p>
     {% endif %}
 
     {% else %}
diff --git a/src/ahc/apps/animals/templates/animals/tabs/_mainpage.html b/src/ahc/apps/animals/templates/animals/tabs/_mainpage.html
index 40d34d4..fcfcef2 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_mainpage.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_mainpage.html
@@ -14,7 +14,7 @@ <h4 class="button secondary outline section-header" role="button" tabindex="0">E
 
     <br>
     <div class="grid">
-        <a role="button" class="secondary outline"
+        <a role="button"
            href="{% url 'note_create' pk=animal.id %}?type_of_event=fast_note"
            hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=fast_note"
            hx-target="#modal-body"
diff --git a/src/ahc/apps/animals/templates/animals/tabs/_medications.html b/src/ahc/apps/animals/templates/animals/tabs/_medications.html
index 5fb1577..d551277 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_medications.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_medications.html
@@ -6,7 +6,7 @@ <h3>Medications</h3>
     {% if "medications" in allowed_categories %}
 
     <div class="records-actions">
-        <a role="button" class="secondary outline"
+        <a role="button"
            href="{% url 'note_create' pk=animal.id %}?type_of_event=medicament_note"
            hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=medicament_note"
            hx-target="#modal-body"
@@ -38,7 +38,7 @@ <h3>Medications</h3>
         </ol>
     </section>
     {% else %}
-    <p>No medication notes recorded yet.</p>
+    <p class="empty-state">No medication notes recorded yet.</p>
     {% endif %}
 
     {% else %}
diff --git a/src/ahc/apps/animals/templates/animals/tabs/_notes.html b/src/ahc/apps/animals/templates/animals/tabs/_notes.html
index 38de6ce..40ece16 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_notes.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_notes.html
@@ -6,7 +6,7 @@ <h3>Notes</h3>
     <section class="timeline">
         <div class="info">
             <div class="records-actions">
-                <a role="button" class="secondary outline"
+                <a role="button"
                    href="{% url 'note_create' pk=animal.id %}"
                    hx-get="{% url 'note_create' pk=animal.id %}"
                    hx-target="#modal-body"
@@ -68,7 +68,7 @@ <h3>Notes</h3>
             <li></li>
         </ol>
         {% else %}
-        <p>No notes recorded yet.</p>
+        <p class="empty-state">No notes recorded yet.</p>
         {% endif %}
     </section>
     {% endif %}
@@ -90,7 +90,7 @@ <h3>Biometrics</h3>
         </ol>
     </section>
     {% else %}
-    <p>No biometric records yet.</p>
+    <p class="empty-state">No biometric records yet.</p>
     {% endif %}
     {% endif %}
 
diff --git a/src/ahc/apps/animals/templates/animals/tabs/_ownership.html b/src/ahc/apps/animals/templates/animals/tabs/_ownership.html
index 42d57e4..3640b3d 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_ownership.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_ownership.html
@@ -3,7 +3,7 @@
 
     <h3>Ownership</h3>
     <p>Current owner: <strong>{{ animal.owner }}</strong></p>
-    <a role="button" class="secondary outline" href="{% url 'animal_ownership' pk=animal.id %}">Change owner</a>
+    <a role="button" href="{% url 'animal_ownership' pk=animal.id %}">Change owner</a>
 
     <br><br>
     <h4>Keepers</h4>
@@ -41,9 +41,9 @@ <h4>Keepers</h4>
         {% endfor %}
     </ul>
     {% else %}
-    <p>No keepers assigned yet.</p>
+    <p class="empty-state">No keepers assigned yet.</p>
     {% endif %}
 
-    <a role="button" class="secondary outline" href="{% url 'manage_keepers' pk=animal.id %}">Add a keeper</a>
+    <a role="button" href="{% url 'manage_keepers' pk=animal.id %}">Add a keeper</a>
 
 </section>
diff --git a/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html b/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html
index 2f1c348..6318c4d 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html
@@ -26,7 +26,7 @@ <h3>Vaccinations</h3>
     </div>
 
     <div class="records-actions">
-        <a role="button" class="secondary outline"
+        <a role="button"
            hx-get="{% url 'vaccination_add' pk=animal.id %}"
            hx-target="#vaccination-rows"
            hx-swap="beforeend"
diff --git a/src/ahc/apps/animals/templates/animals/tabs/_vet.html b/src/ahc/apps/animals/templates/animals/tabs/_vet.html
index f97fec6..14c04c8 100644
--- a/src/ahc/apps/animals/templates/animals/tabs/_vet.html
+++ b/src/ahc/apps/animals/templates/animals/tabs/_vet.html
@@ -31,7 +31,7 @@ <h3>Medical visit timeline</h3>
     <section class="timeline">
         <div class="info">
             <div class="records-actions">
-                <a role="button" class="secondary outline"
+                <a role="button"
                    href="{% url 'note_create' pk=animal.id %}?type_of_event=medical_visit"
                    hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=medical_visit"
                    hx-target="#modal-body"
@@ -84,7 +84,7 @@ <h3>Medical visit timeline</h3>
             <li></li>
         </ol>
         {% else %}
-        <p>No medical visits recorded yet.</p>
+        <p class="empty-state">No medical visits recorded yet.</p>
         {% endif %}
     </section>
     {% endif %}
diff --git a/src/ahc/apps/homepage/templates/homepage/base.html b/src/ahc/apps/homepage/templates/homepage/base.html
index 57e9824..5ee4ecb 100644
--- a/src/ahc/apps/homepage/templates/homepage/base.html
+++ b/src/ahc/apps/homepage/templates/homepage/base.html
@@ -34,6 +34,29 @@
         <div class="site-header__banner">
             <img src="{% static 'media/background/lizard2.jpg' %}" alt="">
         </div>
+        <div class="site-header__user-nav">
+            {% if user.is_authenticated %}
+            <nav>
+                <ul>
+                    <li><small>Hi {{ user.username }}!</small></li>
+                    <li><a role="button" class="secondary outline" href="{% url 'profile' %}">Profile</a></li>
+                    <li>
+                        <form method="post" action="{% url 'logout' %}" style="margin:0;display:contents">
+                            {% csrf_token %}
+                            <button type="submit" class="secondary outline">Logout</button>
+                        </form>
+                    </li>
+                </ul>
+            </nav>
+            {% else %}
+            <nav>
+                <ul>
+                    <li><a role="button" class="secondary outline" href="{% url 'login' %}">Login</a></li>
+                    <li><a role="button" class="secondary outline" href="{% url 'register' %}">Register</a></li>
+                </ul>
+            </nav>
+            {% endif %}
+        </div>
     </div>
 </header>
 
@@ -50,32 +73,11 @@
 </main>
 
 <footer class="container">
-    <div class="grid">
-        <nav>
-        <ul>
-            {% if user.is_authenticated %}
-              <li><small>Hi {{ user.username }}!</small></li>
-            {% endif %}
-        </ul>
+    <nav>
         <ul>
-           <li><a href="https://github.com/Cybernetic-Ransomware">Credits</a></li>
+            <li><a href="https://github.com/Cybernetic-Ransomware">Credits</a></li>
         </ul>
-        <ul>
-            {% if user.is_authenticated %}
-            <li><a role="button" class="secondary outline" href="{% url 'profile' %}">Profile</a></li>
-            <li>
-                <form method="post" action="{% url 'logout' %}" style="margin:0;display:contents">
-                    {% csrf_token %}
-                    <button type="submit" class="secondary outline">Logout</button>
-                </form>
-            </li>
-            {% else %}
-            <li><a role="button" class="secondary outline" href="{% url 'login' %}">Login</a></li>
-            <li><a role="button" class="secondary outline" href="{% url 'register' %}">Register</a></li>
-            {% endif %}
-        </ul>
-        </nav>
-    </div>
+    </nav>
 </footer>
 
 <dialog id="ahc-modal">
diff --git a/src/ahc/apps/homepage/templates/homepage/homepage.html b/src/ahc/apps/homepage/templates/homepage/homepage.html
index 1df47ca..5e487f4 100644
--- a/src/ahc/apps/homepage/templates/homepage/homepage.html
+++ b/src/ahc/apps/homepage/templates/homepage/homepage.html
@@ -13,40 +13,35 @@ <h2>Welcome to your pet organizer</h2>
         <div class="container">
             <h4>Operations:</h4>
 
-            <div class="grid">
-                <a role="button" class="secondary outline" href="{% url 'animals_stable' %}">Manage all animals</a>
+            <div class="ops-row">
+                <a role="button" href="{% url 'animals_stable' %}">Manage all animals</a>
                 <a role="button" class="secondary outline" href="{% url 'animal_create' %}">Add animal</a>
                 <a role="button" class="secondary outline" href="{% url 'biometric_batch' %}">Batch measurements</a>
             </div>
-        <br>
         </div>
 
         {% if pinned_animals %}
-            <div class="container">
-            <br>
+            <div class="container" style="margin-top: 2rem;">
                 <h4>Pinned up:</h4>
 
-                <div class="grid">
+                <div class="animals-grid">
                     {% for animal in pinned_animals %}
                         {% include "partials/animal_card.html" %}
                     {% endfor %}
                 </div>
-            <br>
             </div>
 
         {% endif %}
 
         {% if recent_animals %}
-            <div class="container">
-            <br>
+            <div class="container" style="margin-top: 2rem;">
                 <h4>Recent added:</h4>
 
-                <div class="grid">
+                <div class="animals-grid">
                     {% for animal in recent_animals %}
                         {% include "partials/animal_card.html" %}
                     {% endfor %}
                 </div>
-            <br>
             </div>
 
         {% endif %}
diff --git a/static/css/custom_pico.css b/static/css/custom_pico.css
index f342701..02bc890 100644
--- a/static/css/custom_pico.css
+++ b/static/css/custom_pico.css
@@ -105,15 +105,16 @@ h1, h2, h3, h4, h5, h6 {
   display: block;
 }
 
-/* Site header: Pico's .grid provides the 2-col layout; we add height + clip */
+/* Site header: 3-col grid (brand | banner | user-nav); height clipped to 72px */
 .site-header {
   padding-block: 0;
 }
 
 .site-header__inner {
-  height: 120px;
+  height: 72px;
   overflow: hidden;
   align-items: center;
+  grid-template-columns: auto 1fr auto;
 }
 
 .site-header__brand {
@@ -132,19 +133,61 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .site-header__banner {
-  height: 120px;
+  height: 72px;
   overflow: hidden;
 }
 
-/* height: 120px beats Pico's img { height: auto } (higher specificity: 0,1,1 vs 0,0,1) */
+/* height: 72px beats Pico's img { height: auto } (higher specificity: 0,1,1 vs 0,0,1) */
 .site-header__banner img {
   width: 100%;
-  height: 120px;
+  height: 72px;
   object-fit: cover;
   object-position: 50% 30%;
   display: block;
 }
 
+.site-header__user-nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.site-header__user-nav > nav {
+  margin-bottom: 0;
+}
+
+.site-header__user-nav nav ul {
+  margin-bottom: 0;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.site-header__user-nav nav ul li {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.site-header__user-nav nav ul li > a[role="button"],
+.site-header__user-nav nav ul li > button {
+  padding-block: 0.35rem;
+  font-size: 0.875rem;
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  .site-header__inner {
+    height: auto;
+    padding-block: 0.75rem;
+    grid-template-columns: 1fr;
+  }
+  .site-header__banner {
+    display: none;
+  }
+}
+
 /* Animal profile hero: image left, info right */
 .animal-profile-hero {
   display: flex;
@@ -366,3 +409,24 @@ footer nav ul li > button {
   display: flex;
   align-items: center;
 }
+
+.ops-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pico-spacing);
+  align-items: center;
+  margin-bottom: var(--pico-spacing);
+}
+
+.animals-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: var(--pico-spacing);
+}
+
+.empty-state {
+  color: var(--pico-muted-color);
+  font-style: italic;
+  padding: 1.5rem 0;
+  text-align: center;
+}

From 5b0462aa7ad1e264d600641c1186c6c8320cf928 Mon Sep 17 00:00:00 2001
From: Cybernetic-Ransomware
 <71835339+Cybernetic-Ransomware@users.noreply.github.com>
Date: Sat, 4 Jul 2026 21:16:21 +0200
Subject: [PATCH 2/2] fix(frontend): minor

---
 .../homepage/templates/homepage/homepage.html |  4 ++--
 static/css/custom_pico.css                    | 20 +++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/ahc/apps/homepage/templates/homepage/homepage.html b/src/ahc/apps/homepage/templates/homepage/homepage.html
index 5e487f4..8250891 100644
--- a/src/ahc/apps/homepage/templates/homepage/homepage.html
+++ b/src/ahc/apps/homepage/templates/homepage/homepage.html
@@ -21,7 +21,7 @@ <h4>Operations:</h4>
         </div>
 
         {% if pinned_animals %}
-            <div class="container" style="margin-top: 2rem;">
+            <div class="container homepage-section">
                 <h4>Pinned up:</h4>
 
                 <div class="animals-grid">
@@ -34,7 +34,7 @@ <h4>Pinned up:</h4>
         {% endif %}
 
         {% if recent_animals %}
-            <div class="container" style="margin-top: 2rem;">
+            <div class="container homepage-section">
                 <h4>Recent added:</h4>
 
                 <div class="animals-grid">
diff --git a/static/css/custom_pico.css b/static/css/custom_pico.css
index 02bc890..eb40abd 100644
--- a/static/css/custom_pico.css
+++ b/static/css/custom_pico.css
@@ -111,10 +111,10 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .site-header__inner {
-  height: 72px;
-  overflow: hidden;
+  min-height: 72px;
+  overflow: visible;
   align-items: center;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(0, 1fr) max-content;
 }
 
 .site-header__brand {
@@ -135,6 +135,7 @@ h1, h2, h3, h4, h5, h6 {
 .site-header__banner {
   height: 72px;
   overflow: hidden;
+  min-width: 0;
 }
 
 /* height: 72px beats Pico's img { height: auto } (higher specificity: 0,1,1 vs 0,0,1) */
@@ -177,9 +178,16 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 0;
 }
 
+.site-header__user-nav small {
+  display: inline-block;
+  max-width: 14ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media (max-width: 767px) {
   .site-header__inner {
-    height: auto;
     padding-block: 0.75rem;
     grid-template-columns: 1fr;
   }
@@ -410,6 +418,10 @@ footer nav ul li > button {
   align-items: center;
 }
 
+.homepage-section {
+  margin-top: 2rem;
+}
+
 .ops-row {
   display: flex;
   flex-wrap: wrap;