Stop reserving layout space for the idle sync spinner

visibility:hidden still occupied the header's flex row, squeezing the
title on narrow screens and clipping the unread counter. Render the
spinner with v-if instead so it takes no space when not syncing.

vue/src/components/AppNav.vue

@@ -162,8 +162,8 @@ function handleToggleLayout() {
     <div class="app-nav__wrapper">
       <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
       <span
+        v-if="isSyncing"
         class="app-nav__sync-spinner"
-        :class="{ 'app-nav__sync-spinner--active': isSyncing }"
         aria-hidden="true"
       ></span>
       <select
@@ -268,11 +268,6 @@ function handleToggleLayout() {
   border-radius: 50%;
   opacity: 0.6;
   flex-shrink: 0;
-  visibility: hidden;
-}
-
-.app-nav__sync-spinner--active {
-  visibility: visible;
   animation: app-nav-spin 0.8s linear infinite;
 }
 
@@ -283,7 +278,7 @@ function handleToggleLayout() {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .app-nav__sync-spinner--active {
+  .app-nav__sync-spinner {
     animation: none;
   }
 }