Thanks for the awesome snippet. I was struggling with partial syncs when I close the app too quickly on IOS, this will for sure help.
.sync-status-icon.mod-working svg {
color: #FF8C00;
}
Adding this to the snippet will make the sync icon orange instead of blue to make it stand out more.
Whenever I open my phone with Obsidian Sync, my rule is: ‘Don’t touch anything until the sync is completed.’ This is because I frequently encounter conflicts during syncing, resulting in content loss. For reference, see this discussion:
This morning, my daily note was overwritten due to an Obsidian sync issue.
I propose making the sync status visible on the iOS app, similar to how it is displayed on the macOS app (refer to the screenshot below).
The existing workaround is cumbersome and involves six steps:
Greatly appreciated! Thanks for making this snippet available <3
Hello Cawlin,
I am really new to Obsidian and would also like to make sure I am always syncing my Notes. Making the Sync icon always visible would be really nice, but I don’t know how to add this CSS Snippet to my iPhone. Also I didn’t find any Tutorial. I am sorry to bother you, but could you maybe help out 
?
Here’s how to add snippets in general: CSS snippets - Obsidian Help
On iPhone the Files app doesn’t show hidden folders, so you’ll need to use either the CSS Editor plugin or one of the apps mentioned in [Mobile] IOS : App to work with hidden folder.
With the new version of Obsidian Mobile (v1.6.3) and latest version of the snippet, I have this weird overlapping of icons.
While syncing
Fully synced
Mine is looking alright with this version (Obsidian v1.6.3, iOS)
/* 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;
}
/*-moves sync icon-*/
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
position: absolute;
left: calc(-1 * 44px);
top: 8px;
}
/*-moves three dots-*/
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
padding-right: 25px;
}
Some adjustments may be needed depending of your phone size, personal preferences, etc.
I tried your version, and I have the same overlapping of two sync icons. Also, I am on Android, maybe it has an impact on the rendering.
The snippet contains just that and when I disable it from the Appearance settings, both icons disappear, so I guess it’s not a conflict with another CSS snippet.
Prior to the update the sync icon would sometimes overlap with the menu icon after opening the right sidebar (not specifically while syncing). Opening the left sidebar or rotating the screen would fix it.
The changes I’ve noticed since the update on my iPhone are:
On iPad it’s the same except I’m not sure if it’s farther to the right (if so it’s less noticeable).
Since recently, this CSS snippet appears to be responsible for Obsidian crashing when I tap on an autocorrected word on my device almost all the time. Obsidian basically quits after a second or two
I separated this CSS snippet into a specific CSS file to toggle it off, and it fixes the issue.
I tried both versions below:
After multiple crashes, my Android device end up showing this popup below.
SYSTEM INFO:
Operating system: android 14 (samsung SM-A528B)
Obsidian version: 1.6.5 (147)
API version: v1.6.5
Login status: logged in
Catalyst license: insider
Live preview: on
Base theme: dark
Community theme: Things v2.1.11
Snippets enabled: 7
Restricted mode: off
Plugins installed: 40
Plugins enabled: 14
1: Advanced Tables v0.21.0
2: Editor Syntax Highlight v0.1.3
3: Settings Search v1.3.10
4: Templater v2.3.3
5: Update modified date v1.3.2
6: Image Captions v1.1.0
7: File Color v1.1.0
8: Dataview v0.5.67
9: Nicolas' Plugin v1.0.2
10: Heading Shifter v1.5.1
11: Command Alias v2.1.1
12: Metadata Hider v1.0.2
13: Recent Files v1.4.1
14: Imgur v2.5.2
RECOMMENDATIONS:
Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.
That’s unfortunate. I haven’t seen that behavior, but I’m on iOS.
Lately the sync icon has been disappearing for me anytime I open the side drawer. It had been working flawlessly until the past week or two.
Anybody else having issues / know of a css fix?
It’s been disappearing on me, too, but not every time I open the sidebar. I haven’t figured out what causes it (it may be “when I open the sidebar but only sometimes”).
I’ve noticed a couple other similar bugs that started around the same time (for example the mobile toolbar occasionally disappears on me) — it seems like maybe Obsidian is sometimes forgetting to update parts of the UI.
I thought the icon had stopped disappearing, but it seems I had just stopped doing whatever makes it disappear. Yesterday I enabled the Workspaces core plugin, and I’ve found that “Save and load another layout” always makes it disappear. So there’s a clue, at least.
+1 this would be really nice to have. I’m constantly having to re-open Obsidian on my phone in order to get it to sync something I just added, and it would be nice to have an icon to indicate when sync was finished, so I could make sure to not close it in the first place until it syncs.
This snippet worked for me on Android - was exactly what I was after. Thank you!
This is why I love Obsidian, there’s always a creative solution!
This one worked great for me! I split one part so it also shows correctly on ipad (it feels hacky, but whatever):
/*-moves sync icon on iPad-*/
:is(.is-mobile) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
position: absolute;
left: calc(-1 * 56px);
top: 40px;
}
/*-moves sync icon on iPhone-*/
:is(.is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
position: absolute;
left: calc(-1 * 56px);
top: 8px;
}