From 7bc41f9b0d5231897c46239c46cc81c54b33ce4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Sat, 15 Nov 2025 16:49:48 +0100
Subject: [PATCH] fix snippetbar hidden

---
 client/homebrew/editor/editor.jsx | 32 ++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index a00c47403..968850272 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -58,7 +58,6 @@ const Editor = createClass({
 		return {
 			editorTheme      : this.props.editorTheme,
 			view             : 'text', //'text', 'style', 'meta', 'snippet'
-			snippetbarHeight : 25
 		};
 	},
 
@@ -85,7 +84,18 @@ const Editor = createClass({
 				editorTheme : editorTheme
 			});
 		}
-		this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight });
+  		const snippetBar = document.querySelector('.editor > .snippetBar');
+  		if (!snippetBar) return;
+
+  		this.resizeObserver = new ResizeObserver(entries => {
+    		// throttle/debounce inside if you like
+    		const h = snippetBar.offsetHeight;
+				const editor = document.querySelector('.editor .codeEditor');
+				if (!editor) return;
+				editor.style.height = `calc(100% - ${h}px)`;
+  		});
+
+  		this.resizeObserver.observe(snippetBar);
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
@@ -108,6 +118,10 @@ const Editor = createClass({
 		}
 	},
 
+	componentWillUnmount() {
+  		if (this.resizeObserver) this.resizeObserver.disconnect();
+	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
 		const LEFTARROW_KEY = 37;
@@ -407,13 +421,6 @@ const Editor = createClass({
 		}
 	},
 
-	//Called when there are changes to the editor's dimensions
-	update : function(){
-		const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
-		if(snipHeight !== this.state.snippetbarHeight)
-			this.setState({ snippetbarHeight: snipHeight });
-	},
-
 	updateEditorTheme : function(newTheme){
 		window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
 		this.setState({
@@ -437,7 +444,7 @@ const Editor = createClass({
 					onChange={this.props.onBrewChange('text')}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
+					style={{  height: `calc(100% - 26px)` }} />
 			</>;
 		}
 		if(this.isStyle()){
@@ -451,7 +458,7 @@ const Editor = createClass({
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
+					style={{  height: `calc(100% - 26px)` }} />
 			</>;
 		}
 		if(this.isMeta()){
@@ -468,7 +475,6 @@ const Editor = createClass({
 					userThemes={this.props.userThemes}/>
 			</>;
 		}
-
 		if(this.isSnip()){
 			if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
 			return <>
@@ -481,7 +487,7 @@ const Editor = createClass({
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
+					style={{  height: `calc(100% - 26px)` }} />
 			</>;
 		}
 	},