Status page: group system actions apart from screen switches

Refresh now / Resume automatic were mixed into the same button row as
the per-screen Show X buttons, in whatever order screens happened to
be registered in -- looked cluttered. Now two rows: system actions
first, then the Show X buttons alphabetized by display name.

web/templates/index.html

@@ -35,16 +35,19 @@
     <form class="inline" method="post" action="{{ url_for('refresh_now') }}">
       <button type="submit">Refresh now</button>
     </form>
-    {% for screen_id, screen in screens.items() %}
-    <form class="inline" method="post" action="{{ url_for('switch_now', screen_id=screen_id) }}">
-      <button class="secondary" type="submit">Show {{ screen.display_name }}</button>
-    </form>
-    {% endfor %}
     {% if status.pinned_screen %}
     <form class="inline" method="post" action="{{ url_for('resume_rotation') }}">
       <button class="secondary" type="submit">Resume automatic</button>
     </form>
     {% endif %}
   </div>
+
+  <div class="actions" style="margin-top: 0.75rem;">
+    {% for screen_id, screen in screens.items() | sort(attribute="1.display_name") %}
+    <form class="inline" method="post" action="{{ url_for('switch_now', screen_id=screen_id) }}">
+      <button class="secondary" type="submit">Show {{ screen.display_name }}</button>
+    </form>
+    {% endfor %}
+  </div>
 </div>
 {% endblock %}