Autocomplete completion info going out of viewport with smaller screens

v6
1

Hello!

I’m having a fantastic time learning CM 6 - I’ve got JS and SCSS linting set up, currently working on PHP linting (or at least parsing). I’m getting close to having custom autocompletion set up as well for PHP, JS and SCSS.

One issue I’m running into is the completion info box going out of the viewport on smaller screens. This seems like something that is probably worthy of a fix considering one of CM6’s great features is mobile/touch compatibility.

There are cm-completionInfo-right and cm-completionInfo-left css classes with some kind of orientation detection happening but I feel like there should also be a cm-completionInfo-below (and maybe even potentially above although I’m not sure how that would work logistically). Here are some images to demonstrate the issue (they are being scaled by the forum so it looks like I zoomed, but these are all just cropped screenshots of various screen widths):

image
image1329×434 23.1 KB

image
image843×580 18.3 KB

image
image644×548 10.8 KB

Compared to Monaco:

image
image2336×431 75.2 KB

image
image1453×566 72.5 KB

image
image582×537 38.2 KB

Monaco is notoriously unusable on small screens but even at a width of 290px the completion info is responsive. I suppose another solution would be to hide the info box on smaller screens but that seems like more of a temporary fix.

What are your thoughts? Thank you in advance!

2

For anyone who wants an interim solution for this, this is the css override that does what I want (mostly):

    // autocomplete max-width: 700px + info max-width: 300px
	@media screen and (max-width: 1000px) {

		.cm-completionInfo-right,
		.cm-completionInfo-left {
			left: 0 !important;
			top: 100% !important;
			width: 79vw !important;
			min-width: 250px;
		}

		.cm-tooltip.cm-tooltip-autocomplete > ul {
			max-width: 85vw !important;
		}

	}

This would definitely be better without all the !importants but until there’s a fix, it’s probably better than content overflowing out of the viewport. It looks decent on everything except the Galaxy Fold. Thanks in advance @marijn whenever you get a chance to peep this!

3

This patch should improve the positioning somewhat.

4

Amazing - thank you Marijn!!