From 603dd89691cb4d1166a8c5e91d206e89817b5d11 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 29 Mar 2024 15:01:02 -0400
Subject: [PATCH] UX: minor theme schema editor adjustments for mobile (#26434)

---
 .../addon/components/schema-theme-setting/field.gjs |  2 +-
 .../stylesheets/common/admin/schema_field.scss      | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/schema-theme-setting/field.gjs b/app/assets/javascripts/admin/addon/components/schema-theme-setting/field.gjs
index 9e27ee13300..b0e5625089a 100644
--- a/app/assets/javascripts/admin/addon/components/schema-theme-setting/field.gjs
+++ b/app/assets/javascripts/admin/addon/components/schema-theme-setting/field.gjs
@@ -46,7 +46,7 @@ export default class SchemaThemeSettingField extends Component {
   }
 
   <template>
-    <div class="schema-field" data-name={{@name}}>
+    <div class="schema-field" data-name={{@name}} data-type={{@spec.type}}>
       <label class="schema-field__label">{{@label}}{{if
           @spec.required
           "*"
diff --git a/app/assets/stylesheets/common/admin/schema_field.scss b/app/assets/stylesheets/common/admin/schema_field.scss
index 031f351d128..222cf32788b 100644
--- a/app/assets/stylesheets/common/admin/schema_field.scss
+++ b/app/assets/stylesheets/common/admin/schema_field.scss
@@ -1,11 +1,22 @@
 .schema-field {
   margin-bottom: 1em;
   width: 100%;
-  min-width: 200px;
   display: grid;
   grid-template-columns: 25% 1fr;
   gap: 1em;
 
+  @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    gap: 0;
+    &[data-type="boolean"] {
+      grid-template-columns: auto 1fr;
+      .schema-field__input {
+        order: -1;
+      }
+    }
+  }
+
   .schema-field__label {
     word-break: break-all;
   }