Ideally the panel should be shown where there is room for it (if it is not reachable, it is not very useful).
By default it makes sense to open in the writing direction (right in right-to-left languages) but in case there is no room, it should open to the other side. It would be great if it worked also for top/bottom positions in case someone wants to use the selector in a header/footer.

It is common for UI controls (such as tooltips, popups, and menus) to have these calculations about which direction is better to expand towards according to the viewport, so maybe the approach to do so can be reused from those, or other components can benefit from it if they lack this behaviour.

Does this use oojs-ui, or its own thing?

Either way, I think some of the oojs widgets have similar problems at times (though maybe those are more just plain not fitting on the screen at all at times, with no scaling down? I haven't really looked.). Assuming it all works, though, they'd ideally be consistent.

Ideally, yes. But ULS is not OOJS :/

As long as the behaviour winds up generally the same, that's fine.

For OOjs UI PopupWidgets, the same issue would be T158934: Automatically change popup direction if there is no space – right now this wouldn't be magically fixed even if you switched to OOjs UI.

I think this would actually be a pretty simple fix. Right now, ULS decides whether to display that callout to the left or to the right depending on whether the interface language is LTR or RTL. Instead, it should decide depending on whether the "anchor" is in the left or right half of viewport.

Current code, in [mediawiki/extensions/UniversalLanguageSelector]/resources/js/ext.uls.interface.js:

			rtlPage = $( 'body' ).hasClass( 'rtl' ),
...
							if ( rtlPage ) {
								this.left = ulsTriggerOffset.left - this.$window.width() - caretRadius;
							} else {
								this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretRadius;
							}

Rather than rtlPage, you could test for something like ulsTriggerOffset.left > $( window ).width() / 2.

For future reference, screenshot of the problem:

So, er, how do I get this callout to appear in the first place? I've installed ULS, but it only added the one in p-personal, not the one in the languages.

So, er, I got it to appear, but I can't get the suggested change to actually work. This may not mean much.

Change 354378 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/extensions/UniversalLanguageSelector@master] Determine callout directionality based on position as opposed to language

https://gerrit.wikimedia.org/r/354378

Change 354378 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Determine callout directionality based on position as opposed to language

https://gerrit.wikimedia.org/r/354378

Note that the above patch fixes only the ULS language settings and not the compact language links. A similar solution would be needed for compact language links.

There is also a problem of "caret" appearing at the side of scrollbar, which cannot blend into the popout background. Screenshot showing the issue:

...what. Er. Okay.

There is also a problem of "caret" appearing at the side of scrollbar, which cannot blend into the popout background. Screenshot showing the issue

Could you upload a non-cropped version? I'm having trouble replicating this, but I'm probably not even looking in the right place.

Possibly relatedly, I can't get this stuff to show up at all in chrome now. >.>

Which is to say chrome seems to be broken.

Okay, chrome's fine, that had nothing to do with this.

Problem: can't replicate extra caret. Can consistently cause caret to disappear entirely by opening up more languages thing (only thing I could find that causes a scrollbar at all, basically).

Sorry, if I was not clear. The screesnshot is not related to the patch., it is about compact language selector(The bug is mainly about that, even though you fixed the "language settings"). the one that appear when you click the "X more languages" button below the language list.
I was trying a quick solution to see if we can apply the method to that ULS trigger as well. We can, but the caret appear in the same side of a scrollabar. The langauge list will have scrollbar. Showing the caret just near to scrollbar has an issue - It wont feel like something part of the whole popup but something like the above.

Ah. Feck.

Also there's apparently a problem with the logic above with the caret one (settings) anyway, according to matma rex. So it's possible it's related to why the triangle one (compact selector) wouldn't work anyway?

Change 354670 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/extensions/UniversalLanguageSelector@master] Make caret in displaysettings appear correctly like in languagesettings

https://gerrit.wikimedia.org/r/354670

Change 354739 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/extensions/UniversalLanguageSelector@master] Fix directionality of ULS CLL callout

https://gerrit.wikimedia.org/r/354739

Change 354670 abandoned by Isarra:
Make caret in displaysettings appear correctly like in languagesettings

Reason:
This isn't as good as the other one.

https://gerrit.wikimedia.org/r/354670

Okay, this last one should actually fix everything. >.>

@santhosh Please take a look at 354739 when you can. This is basically all we're waiting on now for deploying Timeless to production (well, testwiki, but still), so if the change is good, let's get it in! And if it isn't, let's fix it..

I went ahead and refactored after the previous one too, and this should now work for all the different sidebar popouts, and also resolves the sidebar issue by making the placement of the CLL caret consistent with the language/display settings..

I've taken screenshots of hopefully every possible state of the popout in Timeless with the latest version of the patch. They look fine. (They look fine in RTL too but I've had enough of taking screenshots.)

Wide mode (1366px):
Medium mode (1200px):
Narrow mode (1024px):					(not visible)
Mobile mode (800px):					(not visible)

Here are the same situations in Vector:

Change 354739 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Fix directionality of ULS CLL and languageselect callouts when appearing on right side of screen

https://gerrit.wikimedia.org/r/354739

Thanks everyone!