Merge pull request #1861 from giovanniTramonto/T-1768-bugifx-lock-but…

…ton-tooltip fix: lock-button-tooltip #1768
googlefonts · Dec 17, 2024 · 0c41855 · 0c41855
2 parents cb606aa + 7021082
commit 0c41855
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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;