Move toolbar icons to right side of sync bar, diff text to left

room_cal/vue/calendar.html

@@ -403,7 +403,7 @@
       margin-bottom: 20px;
       border-bottom: 1px solid var(--border-cell);
     }
-    .sync-bar-tools { display: flex; gap: 6px; flex-shrink: 0; }
+    .sync-bar-tools { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
     .sync-bar-status {
       font-size: 11px;
       font-weight: 600;
@@ -618,20 +618,6 @@
   </div>
 
   <div class="sync-bar">
-    <div class="sync-bar-tools">
-      <button class="icon-btn" :class="{ 'is-on': syncEnabled }" @click="toggleSync" title="Toggle sync mode">
-        <span class="iconify" data-icon="mdi:sync"></span>
-      </button>
-      <button class="icon-btn" :class="{ 'is-on': bulkEnabled }" @click="toggleBulk" title="Bulk edit mode">
-        <span class="iconify" data-icon="mdi:calendar-multiselect"></span>
-      </button>
-      <button class="icon-btn" :disabled="fixBusy['reload']" @click="reloadCaches()" title="Reload calendar data">
-        <span class="iconify" data-icon="mdi:refresh"></span>
-      </button>
-      <button class="icon-btn" :class="`is-health-${healthStatus}`" @click="runHealthCheck" :disabled="healthStatus === 'checking'" :title="healthTitle">
-        <span class="iconify" data-icon="mdi:heart-cog" :class="{ 'anim-spin': healthStatus === 'checking' }"></span>
-      </button>
-    </div>
     <template v-if="syncEnabled">
       <span class="sync-bar-status">
         <template v-if="diffLoading">Syncing…</template>
@@ -672,6 +658,20 @@
         </div>
       </div>
     </template>
+    <div class="sync-bar-tools">
+      <button class="icon-btn" :class="{ 'is-on': syncEnabled }" @click="toggleSync" title="Toggle sync mode">
+        <span class="iconify" data-icon="mdi:sync"></span>
+      </button>
+      <button class="icon-btn" :class="{ 'is-on': bulkEnabled }" @click="toggleBulk" title="Bulk edit mode">
+        <span class="iconify" data-icon="mdi:calendar-multiselect"></span>
+      </button>
+      <button class="icon-btn" :disabled="fixBusy['reload']" @click="reloadCaches()" title="Reload calendar data">
+        <span class="iconify" data-icon="mdi:refresh"></span>
+      </button>
+      <button class="icon-btn" :class="`is-health-${healthStatus}`" @click="runHealthCheck" :disabled="healthStatus === 'checking'" :title="healthTitle">
+        <span class="iconify" data-icon="mdi:heart-cog" :class="{ 'anim-spin': healthStatus === 'checking' }"></span>
+      </button>
+    </div>
   </div>
 
   <div v-if="loading" class="loading-wrap">