Improve draggable surface area of window

[2fifty6]

Use case or problem

In Windows and macOS, there is very little area on Obsidian’s window that is “grabbable” to click and drag the window around the screen, especially when many tabs are open. Finding a spot that’s not a tab (which is draggable in and of itself) or a button can take several seconds and some pretty precise mouse movement (and/or some accidental dragging of tabs or clicking of buttons in the process). This makes for a poor user experience when arranging Obsidian within the workspace.

Proposed solution

I see three options. One or more could be implemented to address the issue.

1. Leave a space on the top bar next to the close/minimize buttons (left side for macOS, right side for Windows) deliberately empty as an always-there window “handle” for dragging. For ease of use, it should be about as wide as the sidebar toggle buttons.
2. Make the empty space in the left toolbar (the one with the buttons for quick switcher, graph view, daily note, etc.) a valid drag “handle” area. For the majority of users, much of the toolbar is blank, making it a very easy mouse target for dragging.
3. Add a small amount of space to the top bar above the tabs. There is currently a very thin sliver there, but it is only a couple of pixels tall, making it a terrible target for dragging. Expanding this a bit would make it better (though not perfect).

Current workaround (optional)

None.

Related feature requests (optional)

The issue below seems potentially related but only mentions macOS. The issue I describe applies to both macOS and Windows (and probably Linux as well, though I don’t have a way to check that OS).

Drag to move window is not very intuitive in macOS app

Use case or problem Under default setting(window frame style=hidden), click and drag these area has no effect in macOS app: empty area of app ribbon area around traffic light button Proposed solution Under default setting(window frame style=hidden), click and drag these area should move the window: empty area of app ribbon area around traffic light button Current workaround (optional) Change window frame style to other values but it’s ugly not optimal visually. Related feature requests (o…

[ariehen]

I usually have the standard window layout: one or both sidebars open and one or two tab groups with a few tabs each, but sometimes I get in a zone testing something out, research, or whatever, and it can get crazy. As you said, it’s difficult to know where to grab that will work 100% of the time.

I’ve been using this for a while (both mac and Windows) to know exactly where to grab with no guesswork. It’s great. margin-left may need adjusting depending on your theme. Give it a try for the time being.

body:not(.is-popout-window) div.side-dock-actions:before {
    content: "\2723";
    font-size: 30px;
    -webkit-app-region: drag;
    text-align: center;
    margin-left: 1px;
}

[2fifty6]

Brilliant workaround! Thank you!

[macrospect]

Fabulous, thanks for posting! I do hope that ultimately the devs make the sidebar active for click-and-drag but, until then, this is a smart workaround that works perfectly (and it’s easy to resize/reshape the click-and-drag icon, too, or even make it blend into the background).

[AtreidesNZ]

I had the same frustration, particularly as I often create new windows that don’t have sidebars.

Workaround

This CSS snippet shifts the tab buttons down by 20 pixels, creating a bit of space at the top of the tab bar that is draggable (without losing any space in the rest of the window):

/* Shift tabs down within tab bar to increase draggable surface area of window*/
.workspace-tab-header-container-inner {
    margin-top: 20px;
}

[Jopp]

Another option would be to activate Obsidians core plugin workspaces, this saves time too

[2fifty6]

How does that plugin improve window dragability?

[Jopp]

workspaces are “workspace” presets.
Just save your favorite workspaces over a period of time, then pick the best ones and switch bw them if needed. It is quicker, in my opinion.

[2fifty6]

How do they help you more easily drag an Obsidian window around the screen, though?

[ariehen]

@Jopp I think you may be mis-understanding. This thread isn’t about dragging around or arranging tabs (“your workspace”) within Obsidian, but having a 100% guaranteed place for grabbing and dragging the full Obsidian window around your desktop to arrange it with your browser, code editor, etc.

Here’s another one, albeit less useful:

/* status bar handle */
body:not(.is-popout-window) div.status-bar:after {
    content: "\2723";
    font-size: 18px;
    -webkit-app-region: drag;
    text-align: center;
    margin-top: 0px;
    cursor: move;
}

[Jopp]

Workspaces adapt to different needs, so dragging is just a temporary need.

Once you know how you want / need your particular workspace, you spend less with things like dragging so you’re back to real work in no time.

[2fifty6]

I don’t want to have to switch to an entirely different workspace just to be able to move Obsidian to a different monitor or to shift it slightly to the right to avoid overlapping with the new email or terminal window I just opened. I don’t know what your window management is like, but my desktop is a pretty dynamic place, and disrupting my workflow to that degree every few minutes just to perform such a basic action as moving a window would be ridiculous.

Having a consistently and readily accessible drag-enabled surface somewhere on a window is well established standard UX nowadays. Obsidian is a unique app, yes, but even unique apps should adhere to usability best practices. In this case, making the empty part of the left button bar a window-drag surface would have no detrimental effect on the app while significantly improving its usability with respect to window management.

[grrowl]

This is fantastic, inspired me to make the whole sidebar draggable:

.workspace-ribbon {
  -webkit-app-region: drag;
}

[WhiteNoise]

this was improved in v1.5.1