From 5840c6ded7d993049d412197a513d2af843aaa93 Mon Sep 17 00:00:00 2001 From: "Julien Carion (juca)" Date: Wed, 4 Oct 2023 10:14:21 +0200 Subject: [PATCH] [IMP] devtools: fixed subwindows minimum width This commit changes the the minimum width of the subwindows to be fixed so that the icons display stays clean even on very small widths. --- .../devtools_window/components_tab/components_tab.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js b/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js index 05aa60473..568ebe38d 100644 --- a/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js +++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js @@ -15,6 +15,7 @@ export class ComponentsTab extends Component { this.store = useStore(); this.flushRendersTimeout = false; useExternalListener(document, "keydown", this.onKeyboardEvent); + useExternalListener(window, "resize", this.onWindowResize); onWillUnmount(() => { window.removeEventListener("mousemove", this.onMouseMove); @@ -53,9 +54,11 @@ export class ComponentsTab extends Component { // Adjust the position of the split between the left and right right window of the components tab onMouseMove = (event) => { + const minWidth = (147 / window.innerWidth) * 100; + const maxWidth = 100 - (100 / window.innerWidth) * 100; this.store.splitPosition = Math.max( - Math.min((event.clientX / window.innerWidth) * 100, 85), - 15 + Math.min((event.clientX / window.innerWidth) * 100, maxWidth), + minWidth ); }; @@ -64,4 +67,9 @@ export class ComponentsTab extends Component { window.removeEventListener("mousemove", this.onMouseMove); window.removeEventListener("mouseup", this.onMouseUp); }; + + onWindowResize = () => { + const minWidth = (147 / window.innerWidth) * 100; + this.store.splitPosition = Math.max(this.store.splitPosition, minWidth); + }; }