Select box adjust size on window resize.

Added view page link to file manager.
Fixed rename file url.

editor.html

@@ -1358,8 +1358,9 @@ <h6 class="header">{%=header%}</h6>
 			<span>{%=title%}</span>
 			<div class="file-actions">
 				<button href="#" class="delete btn btn-outline-danger" title="Delete"><i class="la la-trash"></i></button>
+				<a href="{%=url%}" target="_blank" class="view btn btn-outline-primary" title="View page"><i class="la la la-external-link-alt"></i></a>
 				<button href="#" class="rename btn btn-outline-primary" title="Rename"><i class="la la-pen"></i></button>
-				<button href="#" class="duplicate btn btn-outline-primary" title="Clone"><i class="icon-copy-outline"></i></button>
+				<button href="#" class="duplicate btn btn-outline-primary" title="Duplicate"><i class="icon-copy-outline"></i></button>
 			</div>
 		</label> <input type="checkbox" id="{%=name%}" />
 		<!-- <ol></ol> -->

libs/builder/builder.js

@@ -402,8 +402,6 @@ Vvveb.Components = {
 						element = selectedElement = Vvveb.Builder.selectedEl;
 						let value = event.detail.value, input = event.detail.input, origEvent = event.detail.origEvent;
 
-						//console.log("propertyChange", event, value, input, origEvent);
-
 						if (property.child) element = element.querySelector(property.child);
 						if (property.parent) element = element.parent(property.parent);
 
@@ -1084,24 +1082,24 @@ Vvveb.Builder = {
 				});
 
 				selectBoxPosition = function(event) {
-
-						if (self.selectedEl) {
-							let pos = offset(self.selectedEl);
-
-							SelectBox.style.top  = (pos.top - (self.frameDoc.scrollTop ?? 0)  - self.selectPadding) + "px"; 
-							SelectBox.style.left = (pos.left - (self.frameDoc.scrollLeft ?? 0) - self.selectPadding) + "px"; 
-						}
+						let pos;
+						let target;
 
+						if (self.selectedEl) {
+							pos    = offset(self.selectedEl);
+							target = self.selectedEl;
+						} else
 						if (self.highlightEl) {
-							let pos = offset(self.highlightEl);
-
-							highlightBox.style.top  = (pos.top - (self.frameDoc.scrollTop ?? 0)  - self.selectPadding) + "px"; 
-							highlightBox.style.left = (pos.left - (self.frameDoc.scrollLeft ?? 0) - self.selectPadding) + "px"; 
-
-							//addSectionBox.style.display = "none";
+							pos    = offset(self.highlightEl);
+							target = self.highlightEl;
 						}
 
-				};
+						SelectBox.style.top  = (pos.top - (self.frameDoc.scrollTop ?? 0)  - self.selectPadding) + "px"; 
+						SelectBox.style.left = (pos.left - (self.frameDoc.scrollLeft ?? 0) - self.selectPadding) + "px";
+
+						SelectBox.style.width = ((target.offsetWidth ?? target.clientWidth) + self.selectPadding * 2) + "px"; 			
+						SelectBox.style.height = ((target.offsetHeight ?? target.clientHeight) + self.selectPadding * 2) + "px";
+				}
 
 				window.FrameWindow.addEventListener("scroll", selectBoxPosition);
 				window.FrameWindow.addEventListener("resize", selectBoxPosition);
@@ -2807,7 +2805,7 @@ Vvveb.StyleManager = {
 		let css = "";
 		for (media in this.styles) {
 			if (media === "tablet" || media === "mobile") {
-				css += `@media screen and (max-width: ${(media === 'tablet') ? this.tabletWidth : this.mobileWidth}){\n`
+				css += `@media screen and (max-width: ${(media === 'tablet') ? this.tabletWidth : this.mobileWidth}){\n\n`
 			}
 			for (selector in this.styles[media]) {
 				css += `${selector} {\n`;	
@@ -3422,6 +3420,8 @@ Vvveb.FileManager = {
 		this.tree.addEventListener("click", function (e) {
 			let element = event.target.closest("a");
 			if (element) {
+				e.stopImmediatePropagation();
+				if (element.classList.contains('view')) return;
 				e.preventDefault();
 				return false;
 			}
@@ -3431,6 +3431,7 @@ Vvveb.FileManager = {
 			let element = event.target.closest(".delete");
 			if (element) {
 				Vvveb.FileManager.deletePage(element.closest("li"), e);
+				e.stopImmediatePropagation();
 				e.preventDefault();
 				return false;
 			}
@@ -3440,6 +3441,7 @@ Vvveb.FileManager = {
 			let element = event.target.closest(".rename");
 			if (element) {
 				Vvveb.FileManager.renamePage(element.closest("li"), e, false);
+				e.stopImmediatePropagation();
 				e.preventDefault();
 				return false;
 			}
@@ -3449,6 +3451,7 @@ Vvveb.FileManager = {
 			let element = event.target.closest(".duplicate");
 			if (element) {
 				Vvveb.FileManager.renamePage(element.closest("li"), e, true);
+				e.stopImmediatePropagation();
 				e.preventDefault();
 				return false;
 			}
@@ -3498,7 +3501,7 @@ Vvveb.FileManager = {
 
 			if (page) {
 
-				fetch(deleteUrl, {method: "POST",  body: JSON.stringify({file:page.file})})
+				fetch(deleteUrl, {method: "POST",  body: new URLSearchParams({file:page.file})})
 				.then((response) => {
 					if (!response.ok) { throw new Error(response) }
 					return response.text()
@@ -3536,7 +3539,7 @@ Vvveb.FileManager = {
 
 			if (page) {
 
-				fetch(deleteUrl, {method: "POST",  body: JSON.stringify({file:page.file, newfile:newfile, duplicate})})
+				fetch(renameUrl, {method: "POST",  body: new URLSearchParams({file:page.file, newfile:newfile, duplicate})})
 				.then((response) => {
 					if (!response.ok) { throw new Error(response) }
 					return response.text()
@@ -3569,8 +3572,8 @@ Vvveb.FileManager = {
 						}
 				})
 				.catch(error => {
-					console.log(error.statusText);
-					displayToast("bg-danger", "Error", "Error deleting page!");
+					console.log(error);
+					displayToast("bg-danger", "Error", "Error renaming page!");
 				});				
 			}
 		}