Fix mobile SaaS hero stats stacking override precedence

mandelstudio/settings/env/prd.py

@@ -18,6 +18,7 @@ ALLOWED_HOSTS = [
     "www.mandelblog.com",
     "mandelblog.com",
 ]
+CANONICAL_BASE_URL = "https://www.mandelblog.com"
 if "salt_target" in globals():
     ALLOWED_HOSTS.append("mandelstudio.%s" % salt_target)  # pylint: disable=E0602
 # pylint: disable=E0602

mandelstudio/sitemaps.py

@@ -1,5 +1,6 @@
 from django.contrib.sitemaps.views import index as sitemap_index_view
 from django.contrib.sitemaps.views import sitemap as sitemap_section_view
+from django.conf import settings
 from django.http import HttpResponse
 
 from wagtail.models import Locale, Page
@@ -15,6 +16,13 @@ from ocyan.plugin.wagtail_oscar_integration.sitemap import (
 )
 
 
+def _absolute_sitemap_url(request, path: str) -> str:
+    canonical_base = getattr(settings, "CANONICAL_BASE_URL", "").rstrip("/")
+    if canonical_base:
+        return f"{canonical_base}{path}"
+    return request.build_absolute_uri(path)
+
+
 class WagtailSitemap(BaseWagtailSitemap):
     def items(self):
         page_ids = []
@@ -74,7 +82,7 @@ def sitemap_section(request, section=None):
 
 
 def robots_txt(request):
-    sitemap_url = request.build_absolute_uri("/sitemap.xml")
+    sitemap_url = _absolute_sitemap_url(request, "/sitemap.xml")
     content = "\n".join(
         [
             "User-agent: *",

mandelstudio/static/mandelstudio/scss/layout_overrides.scss

@@ -227,49 +227,114 @@ body.cookie-consent-open {
 
 @media (max-width: 991.98px) {
   header .header-inner > .container {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    column-gap: 0.375rem;
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    width: 100%;
+    max-width: 100%;
+    gap: 0.5rem;
     padding-top: 0.625rem;
     padding-bottom: 0.625rem;
+    padding-left: max(10px, env(safe-area-inset-left, 0px));
+    padding-right: max(10px, env(safe-area-inset-right, 0px));
+  }
+
+  header .header-inner > .container > .search-wrapper,
+  header .header-inner > .container > .alert-messages-header {
+    display: none !important;
   }
 
   header .header-inner > .container > .navbar-brand {
-    order: 1;
-    margin: 0;
-    flex: 0 1 auto;
+    order: 1 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    flex: 1 1 auto !important;
+    min-width: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  header .header-inner > .container > .navbar-brand .logo.big_brand {
+    display: block;
+    margin: 0 !important;
+    max-width: none;
+  }
+
+  header .header-inner > .container > .navbar-brand picture {
+    display: block;
   }
 
   header .header-inner > .container > .navbar-brand img {
-    width: auto;
-    height: auto;
-    max-height: 74px;
-    max-width: 190px;
+    display: block;
+    width: auto !important;
+    height: auto !important;
+    max-width: min(34vw, 128px) !important;
+    max-height: 56px !important;
+    margin: 0 !important;
+    transform: none !important;
   }
 
   header .header-inner > .container > .header-right {
+    order: 2 !important;
+    margin: 0 0 0 auto !important;
+    padding: 0 !important;
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: 0.35rem;
+    flex: 0 0 auto !important;
+  }
+
+  header .header-right > .language-dropdown {
+    order: 4;
+  }
+
+  header .header-right > a[data-bs-target="#siteSearchModal"],
+  header .header-right > a.search-toggler {
+    order: 1;
+  }
+
+  header .header-right > a.user-button.menu-circle:not(.search-toggler):not([data-bs-target="#siteSearchModal"]) {
     order: 2;
-    margin-left: auto;
-    flex: 0 0 auto;
-    gap: 0.375rem;
+  }
+
+  header .header-right > .basket-dropdown {
+    order: 3;
+  }
+
+  header .header-right .user-button,
+  header .header-right .dropdown-toggle {
+    margin: 0 !important;
   }
 
   header .header-right .language-dropdown,
   header .header-right .basket-dropdown,
   header .header-right > a.user-button.menu-circle,
   header .header-right .menu-circle {
-    width: 36px;
-    height: 36px;
-    min-width: 36px;
-    min-height: 36px;
-    flex-basis: 36px;
+    width: 34px;
+    height: 34px;
+    min-width: 34px;
+    min-height: 34px;
+    flex: 0 0 34px;
+  }
+
+  header .header-right,
+  header .header-right .basket-dropdown,
+  header .header-right .menu-circle {
+    position: relative;
+    z-index: 100;
   }
 
   header .header-inner > .container > .navbar-toggler {
     order: 3;
-    margin-left: 0.125rem;
     flex: 0 0 auto;
+    margin: 0 !important;
+    position: fixed;
+    right: max(12px, env(safe-area-inset-right, 0px));
+    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
   }
 
   header .header-inner > .container > .navbar-collapse {
@@ -336,16 +401,6 @@ body.cookie-consent-open {
     border-bottom: 1px solid rgba(15, 23, 42, 0.08);
   }
 
-
-  header .header-right,
-  header .header-right .basket-dropdown,
-  header .header-right .menu-circle {
-    position: relative;
-    z-index: 100;
-  }
-}
-
-@media (max-width: 991.98px) {
   body.mobile-menu-open {
     header .header-inner > .container > .navbar-brand {
       opacity: 0;
@@ -364,7 +419,30 @@ body.cookie-consent-open {
       opacity: 0 !important;
       pointer-events: none !important;
     }
+  }
+}
 
+@media (max-width: 374.98px) {
+  header .header-inner > .container {
+    gap: 0.25rem;
+    padding-left: max(8px, env(safe-area-inset-left, 0px));
+    padding-right: max(8px, env(safe-area-inset-right, 0px));
+  }
+
+  header .header-inner > .container > .navbar-brand img {
+    max-width: 108px !important;
+    max-height: 48px !important;
+  }
+
+  header .header-right .language-dropdown,
+  header .header-right .basket-dropdown,
+  header .header-right > a.user-button.menu-circle,
+  header .header-right .menu-circle {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    flex: 0 0 32px;
   }
 }
 
@@ -412,3 +490,27 @@ body.cookie-consent-open {
     }
   }
 }
+
+@media (max-width: 767.98px) {
+  .te-modern-saas .te-block--saas-hero-banner .saas-hero.saas-hero--split {
+    .saas-hero__stats {
+      width: 100% !important;
+      max-width: 100% !important;
+      gap: 0.625rem;
+      grid-template-columns: minmax(0, 1fr) !important;
+    }
+
+    .saas-hero__stat {
+      width: 100% !important;
+      min-width: 0 !important;
+      padding: 0.75rem 0.875rem;
+    }
+
+    .saas-hero__stat-value,
+    .saas-hero__stat-label {
+      white-space: normal !important;
+      overflow-wrap: break-word !important;
+      word-break: normal !important;
+    }
+  }
+}

mandelstudio/templatetags/localized_navigation.py

@@ -2,12 +2,41 @@ from __future__ import annotations
 
 from django import template
 from django.conf import settings
+from urllib.parse import urlsplit, urlunsplit
 
 from wagtail.models import Page
 
 register = template.Library()
 
 
+def _canonical_base_url() -> str:
+    return getattr(settings, "CANONICAL_BASE_URL", "").rstrip("/")
+
+
+def _with_canonical_host(url_or_path: str | None) -> str:
+    value = url_or_path or ""
+    base = _canonical_base_url()
+    if not base:
+        return value
+    if not value:
+        return f"{base}/"
+    if value.startswith("/"):
+        return f"{base}{value}"
+    parsed = urlsplit(value)
+    if parsed.scheme and parsed.netloc:
+        canonical = urlsplit(base)
+        return urlunsplit(
+            (
+                canonical.scheme,
+                canonical.netloc,
+                parsed.path,
+                parsed.query,
+                parsed.fragment,
+            )
+        )
+    return f"{base}/{value.lstrip('/')}"
+
+
 def _normalize_language_code(language_code: str | None) -> str:
     return (language_code or settings.LANGUAGE_CODE).split("-")[0]
 
@@ -41,10 +70,10 @@ def _translated_pages(page):
 
 def _build_absolute_url(request, path: str | None, page=None) -> str:
     if path and request is not None:
-        return request.build_absolute_uri(path)
+        return _with_canonical_host(request.build_absolute_uri(path))
     if page is not None:
-        return getattr(page, "full_url", "") or path or ""
-    return path or ""
+        return _with_canonical_host(getattr(page, "full_url", "") or path or "")
+    return _with_canonical_host(path or "")
 
 
 @register.simple_tag
@@ -89,7 +118,7 @@ def page_canonical_url(context):
     if page is not None and getattr(page, "url", None):
         return _build_absolute_url(request, page.url, page)
     if request is not None:
-        return request.build_absolute_uri()
+        return _with_canonical_host(request.build_absolute_uri())
     return ""