fix: keep mobile header title aligned when navbar menu expands

Agent-Logs-Url: https://github.com/dsaub/proyecto-final/sessions/8f4a8d58-4e90-48ad-8195-23b90d8b22d4

Co-authored-by: dsaub <54474838+dsaub@users.noreply.github.com>

tienda/static/css/custom.css

@@ -63,8 +63,9 @@ p.price {
 .navbar.header .site-title-mobile {
   color: #FFF;
   position: absolute;
+  top: calc(var(--bs-navbar-padding-y) + 20px);
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
   margin: 0;
   max-width: calc(100% - 9rem);
   overflow: hidden;

tienda/tests.py

@@ -1,4 +1,5 @@
 import json
+from pathlib import Path
 from unittest.mock import MagicMock, patch
 
 from django.test import TestCase, override_settings
@@ -1371,6 +1372,20 @@ class EndpointViewTests(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, 'site-title-mobile d-md-none')
         self.assertContains(response, 'site-title-desktop')
+
+    def test_mobile_site_title_css_keeps_title_pinned_to_header_row(self):
+        css_path = Path(__file__).resolve().parent / "static" / "css" / "custom.css"
+        css_content = css_path.read_text(encoding="utf-8")
+
+        rule_start = css_content.find(".navbar.header .site-title-mobile")
+        self.assertNotEqual(rule_start, -1)
+
+        rule_end = css_content.find("}", rule_start)
+        self.assertNotEqual(rule_end, -1)
+        rule_block = css_content[rule_start:rule_end]
+
+        self.assertIn("top: calc(var(--bs-navbar-padding-y) + 20px);", rule_block)
+        self.assertIn("transform: translate(-50%, -50%);", rule_block)
     def test_home_mobile_welcome_title_centered(self):
         response = self.client.get(reverse("home"))
         html = response.content.decode()