Captcha: Fix spacing of renew button

Author: chris34

ChangeLog.rst

@@ -36,6 +36,7 @@ Unreleased 1.42.3 (2025-MM-DD)
 * Reworked ``MetaFilter`` in wiki to yield more accurate results
 * Use HTML ``<summary>`` and ``<details>`` instead of own JS collapse
 * Remove ``python-dateutil`` as direct dependency of Inyoka (still needed by dependencies ``celery`` and ``icalendar``)
+* Captcha: Fix spacing of renew button
 
 🗑 Deprecations
 --------------

inyoka/portal/jinja2/portal/register.html

@@ -18,6 +18,7 @@ <h3>Registrierung</h3>
   <form action="" method="post" class="-horizontal">
     {{ csrf_input }}
     {{ form.non_field_errors() }}
+    {{ form.media }}
     <dl>
       {{ render_form(form, ['username', 'password', 'confirm_password',
                             'email'], inline=true)}}

inyoka/static/style/captcha.less

@@ -0,0 +1,17 @@
+/**
+ * style.captcha
+ * ~~~~~~~~~~~~~
+ *
+ * The styles for the captcha.
+ *
+ * :copyright: (c) 2007-2025 by the Inyoka Team, see AUTHORS for more details.
+ * :license: BSD, see LICENSE for more details.
+ */
+
+img.captcha {
+  vertical-align: bottom;
+}
+input[name="renew_captcha"] {
+  margin-top: 1em;
+  margin-left: 1em;
+}

inyoka/utils/forms.py

@@ -267,6 +267,11 @@ def clean(self, value):
 class ImageCaptchaWidget(TextInput):
     template_name = 'forms/widgets/image_captcha.html'
 
+    class Media:
+        css = {
+            "all": ["style/captcha.css"],
+        }
+
     def get_context(self, name, value, attrs):
         context = super().get_context(name, value, attrs)
         context['widget']['captcha_url'] = href('portal', __service__='portal.get_captcha',