Fix(UI): Contact form reCAPTCHA style correction for extreme zooming.

models/model_view_base.py

@@ -133,6 +133,7 @@ class Model_View_Base(BaseModel, ABC):
     FLAG_PAGE_BODY: ClassVar[str] = 'page-body'
     FLAG_PHONE_NUMBER: ClassVar[str] = Base.FLAG_PHONE_NUMBER
     FLAG_POSTCODE: ClassVar[str] = Base.FLAG_POSTCODE
+    FLAG_RECAPTCHA: ClassVar[str] = 'recaptcha'
     FLAG_RIGHT_HAND_SIDE: ClassVar[str] = 'rhs'
     FLAG_ROW: ClassVar[str] = 'row'
     FLAG_ROW_NEW: ClassVar[str] = 'row-new'

static/css/pages/core/contact.css

@@ -41,6 +41,10 @@ textarea.form-input {
     padding-left: 200px;
 }
 
+.container.recaptcha {
+    margin-left: 15vw;
+}
+
 input[type="submit"] {
     margin-left: 40%;
     padding: 0.75rem 1.5rem;
@@ -87,4 +91,10 @@ input[type="submit"]:hover {
         margin-left: 0;
         width: 100%;
     }
+}
+
+@media (max-width: 400px) {
+    .container.recaptcha {
+        margin-left: -12vw;
+    }
 }

templates/layouts/layout.html

@@ -117,6 +117,7 @@
         var flagPageBody = "{{ model.FLAG_PAGE_BODY }}";
         var flagPhoneNumber = "{{ model.FLAG_PHONE_NUMBER }}";
         var flagPostcode = "{{ model.FLAG_POSTCODE }}";
+        var flagRecaptcha = "{{ model.FLAG_RECAPTCHA }}";
         var flagRightHandSide = "{{ model.FLAG_RIGHT_HAND_SIDE }}";
         var flagRow = "{{ model.FLAG_ROW }}";
         var flagRowNew = "{{ model.FLAG_ROW_NEW }}";

templates/pages/core/_contact.html

@@ -59,7 +59,7 @@
                     {{ model.form_contact.receive_marketing() }}
                     {{ model.form_contact.receive_marketing.label }}
                 </div>
-                <div class="{{ model.FLAG_CONTAINER }}">
+                <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_RECAPTCHA }}">
                     {{ model.form_contact.recaptcha() }}
                 </div>
                 <div class="{{ model.FLAG_CONTAINER_INPUT }}">