[IDEA] Auto place model of "More" to avoid border

[linonetwo]

Is your feature request related to a problem? Please describe.

Sometimes model of "More" page control button will be hidden by right window border

And on mobile, I'm using a bottom docker bar to display page control buttons, then the model is hidden by bottom border.

Describe the solution you'd like

Auto re-place the model to avoid collision with window borders. Use library like https://github.com/floating-ui/floating-ui (or copy it here)

Describe alternatives you've considered

Or allow control the direction of the pupup, by using a variable? So I can control it to pop in up direction.

Additional context

I'm placing the pagecontrol buttons on the bottom like this on mobile

title: $:/plugins/linonetwo/itonnote/UI/PageControlBelowPage
tags: $:/tags/AboveStory

<!-- Though visually it is on the bottom of the page, but we have to use AboveStory to make sure it is overlay on the story. -->
<$list filter="[[$:/plugins/linonetwo/itonnote/settings/PageControlBelowPage]get[text]else[no]match[yes]]">
  <nav class="page-control-below-page">
    {{$:/core/ui/PageTemplate/pagecontrols}}
  </nav>
</$list>

[linonetwo]

Already mentioned by @kookma many times ago https://groups.google.com/g/tiddlywiki/c/dFxN3eIrAzo/m/6h9rISmTDAAJ

[kookma]

I think @theSherwood did some investigations on improving popups and floating windows in TiddlyWiki.