From 0700dde04e71ba212e2e6d59bea1ed887dd95f61 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Sun, 7 Jul 2024 01:37:38 +0200
Subject: [PATCH] [BUG] Fix mobile UI for organisation creation

- Don't make checkpoints or radio inputs full width on a small screen,
these obviously shouldn't try to take up the whole width of a container.
- Wrap the label for organisation permission box inside a `<span
class="inline field">`, so it gets a left-margin from the `.inline.field
> :first-child` selector. This make the checkboxes and radio buttons
groups look indented from the left.
- Resolves #4361

(cherry picked from commit 610487eb833da399e22cf81e127fb1865a5d9054)
---
 templates/org/create.tmpl | 2 +-
 web_src/css/form.css      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/org/create.tmpl b/templates/org/create.tmpl
index 004cd9be80..92be4a0adb 100644
--- a/templates/org/create.tmpl
+++ b/templates/org/create.tmpl
@@ -34,7 +34,7 @@
 					</div>
 
 					<div class="inline field" id="permission_box">
-						<label>{{ctx.Locale.Tr "org.settings.permission"}}</label>
+						<span class="inline field"><label>{{ctx.Locale.Tr "org.settings.permission"}}</label></span>
 						<div class="inline-grouped-list">
 							<div class="ui checkbox">
 								<input type="checkbox" name="repo_admin_change_team_access" checked>
diff --git a/web_src/css/form.css b/web_src/css/form.css
index dd2788f542..d8239c5dcf 100644
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@@ -466,7 +466,7 @@ textarea:focus,
     margin-bottom: 1em;
     width: 100%;
   }
-  .new.org .ui.form .field input {
+  .new.org .ui.form .field input:not([type="checkbox"], [type="radio"]) {
     width: 100% !important;
   }
 }