Improve early access checkbox label and fix multiline alignment

Author: tobihagemann

i18n/de.yaml

@@ -35,7 +35,7 @@
 - id: accept_hub_newsletter_optional
   translation: "Ich bin damit einverstanden, Neuigkeiten von Cryptomator Hub per E-Mail zu erhalten (optional)."
 - id: accept_hub_managed_early_access_optional
-  translation: "Early access"
+  translation: "<span class=\"inline-flex px-2 py-0.5 rounded-full text-xs font-medium uppercase bg-primary-l2 text-dark\">BETA</span> <a class=\"text-link\" href=\"https://docs.cryptomator.org/hub/early-access/\" target=\"_blank\">Early Access von Cryptomator Hub 1.5.0</a> mit brandneuen Features und einer verlängerten 100-Tage-Testphase testen (optional)."
 - id: accept_privacy
   translation: "Ich akzeptiere die <a class=\"text-link\" href=\"/de/privacy/\">Datenschutzerklärung</a>."
 - id: accept_privacy_implicitly

i18n/en.yaml

@@ -35,7 +35,7 @@
 - id: accept_hub_newsletter_optional
   translation: "I agree to get updates from Cryptomator Hub via email (optional)."
 - id: accept_hub_managed_early_access_optional
-  translation: "Early access"
+  translation: "<span class=\"inline-flex px-2 py-0.5 rounded-full text-xs font-medium uppercase bg-primary-l2 text-dark\">BETA</span> Try out <a class=\"text-link\" href=\"https://docs.cryptomator.org/hub/early-access/\" target=\"_blank\">early access of Cryptomator Hub 1.5.0</a> with brand new features and an extended 100-day trial (optional)."
 - id: accept_privacy
   translation: "I accept the <a class=\"text-link\" href=\"/privacy/\" target=\"_blank\">Privacy Policy</a>."
 - id: accept_privacy_implicitly

layouts/partials/checkbox.html

@@ -1,3 +1,5 @@
 {{ $unique_id := printf "id-%s" (delimit (shuffle (seq 1 9)) "") }}
-<input class="mr-1 rounded-sm text-primary focus:ring-0 focus:ring-offset-0 focus:border-secondary" type="checkbox" id="{{ $unique_id }}" x-model="{{ .alpineVariable }}" />
-<label for="{{ $unique_id }}">{{ .label }}</label>
+{{/* pl-6 + -indent-6: wrapped lines align with text, not checkbox. [&_*]:indent-0: reset for child elements (e.g. pills). */}}
+<label class="inline-block pl-6 -indent-6 [&_*]:indent-0" for="{{ $unique_id }}">
+  <input class="mr-2 rounded-sm text-primary focus:ring-0 focus:ring-offset-0 focus:border-secondary" type="checkbox" id="{{ $unique_id }}" x-model="{{ .alpineVariable }}" />{{ .label | safeHTML }}
+</label>