[Mobile] Make Sync icon always visible

Feature requests
, ,
6

Workaround: I finally asked the Obsidian Discord #appearance channel for a snippet to make the Obsidian Sync icon always visible on mobile.

SailKite kindly provided one! Discord

Currently the icon overlaps its neighbors, but I’m able to tap them both so I’m using it. I’ll try to tweak it someday. For now, this is a big improvement!

no warranty for damages, this is gonna be scuffed

/* attempt to display sync icon on mobile while drawer is closed */
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
    display: flex !important;
    overflow: visible;
    left: 100%;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right .workspace-drawer-inner {
    overflow: visible;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
    position: absolute;
    left: calc(-1 * var(--size-4-16));
    top: var(--size-2-2);
}

you can fiddle with the positioning by changing the left declaration in the last ruleset
i did this all with mobile emulation so it’s not surprising that the real value that works comfortably in the layout is different :sweat_smile:
also, this does technically make it so that the drawer itself is always present, just offscreen instead of not displayed
whether that produces side effects, i can’t say, so just be aware of that
…
--size-4-16 corresponds to 64px, just for comparison
higher values make it go farther left, lower goes closer to the edge

EDIT: Christian_S notes that using --size-4-8 moves the icon to the right edge of the screen. Discord

4 Likes