diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js index 1feb7e0b7..616e8a43a 100644 --- a/src/fontra/client/web-components/ui-form.js +++ b/src/fontra/client/web-components/ui-form.js @@ -14,14 +14,16 @@ export class Form extends SimpleElement { static styles = ` :host { --label-column-width: 32%; + padding: 1em; + overflow: hidden auto; } + .ui-form { display: grid; align-items: center; grid-template-columns: var(--label-column-width) auto; box-sizing: border-box; gap: 0.35rem 0.35rem; - overflow-y: auto; margin: 0em; padding: 0em; } diff --git a/src/fontra/views/editor/panel-selection-info.js b/src/fontra/views/editor/panel-selection-info.js index bbe7fab99..bd9b1e969 100644 --- a/src/fontra/views/editor/panel-selection-info.js +++ b/src/fontra/views/editor/panel-selection-info.js @@ -27,24 +27,26 @@ export default class SelectionInfoPanel extends Panel { .selection-info { display: flex; flex-direction: column; - gap: 1em; justify-content: space-between; box-sizing: border-box; height: 100%; width: 100%; - padding: 1em; white-space: normal; } - ui-form { - overflow-x: hidden; - overflow-y: auto; + .selection-info-form { + flex: 1; + } + + .behavior-field { + padding: 1em; } `; constructor(editorController) { super(editorController); this.infoForm = new Form(); + this.infoForm.classList.add("selection-info-form"); this.contentElement.appendChild(this.infoForm); this.contentElement.appendChild(this.setupBehaviorCheckBox()); this.throttledUpdate = throttleCalls((senderID) => this.update(senderID), 100); diff --git a/src/fontra/views/editor/panel-transformation.js b/src/fontra/views/editor/panel-transformation.js index d71c97650..9adac9c28 100644 --- a/src/fontra/views/editor/panel-transformation.js +++ b/src/fontra/views/editor/panel-transformation.js @@ -36,14 +36,16 @@ export default class TransformationPanel extends Panel { .selection-transformation { display: flex; flex-direction: column; - gap: 1em; justify-content: space-between; box-sizing: border-box; height: 100%; width: 100%; - padding: 1em; white-space: normal; } + + .selection-transformation-form { + flex: 1; + } `; static stylesForm = ` @@ -82,7 +84,7 @@ export default class TransformationPanel extends Panel { constructor(editorController) { super(editorController); this.infoForm = new Form(); - + this.infoForm.classList.add("selection-transformation-form"); this.infoForm.appendStyle(TransformationPanel.stylesForm); this.contentElement.appendChild(this.infoForm); this.fontController = this.editorController.fontController;