Reposition settings, plugins, command etc. window alignment

Plugins ideas
1

Working with Obsidian stretched open on two monitors is a real pain because important things like settings, the command palette (is that what it’s called?) and plugins windows all appear split between both monitors. Sometimes it’s not too bad when the monitors are side-by side but in other arrangements it’s a big annoyance.

I’ve managed to manually hack a few of these with snippets but thought it might be doable via a plugin. Has anyone thought of that yet? Here’s my (very hacky) css snippet I tried to make for the settings window… maybe someone will have some input on this or help clean it up haha. I haven’t tried the command palette or plugins window yet because this took way to long already and I’ve got to move on.

(note: the below code also makes the window resizable to some extent and increases the height of the window (I’m not sure why so many themes make this small to begin with).

.modal.mod-settings, .modal.mod-settings .vertical-tab-container{
	position: absolute;
	top: 50px;
	left: 100px!important;
    width: clamp(200px, 60vw, 1920px);
    min-height: 20vh;
    height: 90vh!important;
    max-height: 90vh;
    border-radius: var(--scale-2-8);
    overflow-y: hidden;
    border: 1px solid var(--background-modifier-border);
    resize:both;
    }

.modal-content {height: 90vh!important}

.vertical-tabs-container {max-height: 90vh!important}

.theme-dark .modal .modal-content .vertical-tab-header, .theme-dark .modal .modal-content .vertical-tab-content-container .vertical-tab-content{
	height: 90vh!important;
}


.modal.mod-settings .vertical-tab-content-container{
	height: 90vh!important;
}
.vertical-tab-header {height: 90vh!important}

.vertical-tab-header-group {max-height: 90vh!important}

One feature I’d really like to see for these kinds of UI elements is making them draggable, with something like

dragElement(document.getElementByID("modal.mod-settings"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

But I don’t know how to… inject that into Obsidian. I can vaguely understand JS on a superficial level but really don’t know what I’m doing, just messing with code I found online.

Otherwise some kind of setting to adjust the default alignment of the window would be great.