Move spinner out of the top bar

css/80_app.css

@@ -568,15 +568,15 @@ button.add-note svg.icon {
 
 .spinner {
     opacity: .5;
-    display: flex;
-    flex-shrink: 2;
-    justify-content: flex-end;
+    position: absolute;
+    right: 4px;
+    bottom: 26px;
 }
 .spinner img {
-    height: 40px;
-    width: 40px;
-    border-radius: 4px;
-    background: black;
+    height: 20px;
+    width: 20px;
+    background: transparent;
+    border-radius: 100%;
 }
 [dir='rtl'] .spinner img {
     -moz-transform: scaleX(-1);
@@ -635,7 +635,7 @@ button.add-note svg.icon {
     pointer-events: none;
 }
 .search-add .popover {
-    max-height: 200px;
+    max-height: 250px;
     width: 100%;
     position: absolute;
     top: 40px;
@@ -643,6 +643,9 @@ button.add-note svg.icon {
     border-top: 2px solid #DCDCDC;
     overflow-y: auto;
 }
+.search-add .popover .list {
+    max-height: 70vh;
+}
 .search-add .list-item {
     display: flex;
     position: relative;

modules/ui/init.js

@@ -140,13 +140,6 @@ export function uiInit(context) {
             .call(uiSave(context));
 
 
-        // For now, just put spinner at the end of the #bar
-        bar
-            .append('div')
-            .attr('class', 'spinner')
-            .call(uiSpinner(context));
-
-
         // Map controls (appended to #bar, but absolutely positioned)
         var controls = content
             .append('div')
@@ -190,6 +183,10 @@ export function uiInit(context) {
             .call(help.renderToggleButton);
         content.call(help.renderPane);
 
+        content
+            .append('div')
+            .attr('class', 'spinner')
+            .call(uiSpinner(context));
 
         // Add attribution and footer
         var about = content