Select box and highlight box on resize and scroll

[AngelinaShoiliRozario]

The top and left position of the select-box and highlight-box is being reset on scroll or resize. but the width is not changing. Again When in small device the "tablet view" is hiding some part of the frame.

[givanz]

Thanks for the bug report, select box size is fixed in the last commit https://github.com/givanz/VvvebJs/commit/ec4491755872738a94233755681bc34079a06e73

The tablet width is 768px and it doesn't fit in the area left in the small window with 2 columns, this is why the right column overlaps the content.

I'm not sure what fix can be made for this case when window size is too small, maybe add a zoom control?

[AngelinaShoiliRozario]

You can see the select-box and highlight-box top and left position is updating, but the width is not updating. It may not be a bug but still it doesn't look good. Thank you.

[givanz]

The screenshot code is missing the new code with width/height adjustments from the last commit https://github.com/givanz/VvvebJs/blob/master/libs/builder/builder.js#L1084-L1102

For the highlight box I think it should be hidden on resize/scroll because it is only used on hovering over elements

selectBoxPosition = function(event) {
 let pos;
 let target;

 highlightBox.style.display = "none"; //addition for highlight box

 if (self.selectedEl) {
  pos    = offset(self.selectedEl);
  target = self.selectedEl;
 } else
 if (self.highlightEl) {
  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";
}

[AngelinaShoiliRozario]

Thank you.