UX: minor theme schema editor adjustments for mobile (#26434)

This commit is contained in:
Kris 2024-03-29 15:01:02 -04:00 committed by GitHub
parent ba806eec74
commit 603dd89691
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 2 deletions

View File

@ -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
"*"

View File

@ -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;
}