fix accessibility violation by moving text to top of dialog on SelectPanel

.changeset/bright-eggs-return.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Moves the loading and "no results" messages on the SelectPanel to the top of the container.

app/components/primer/alpha/select_panel.html.erb

@@ -65,12 +65,12 @@
                     mb: 2,
                     aria: { disabled: true, busy: true },
                     display: :flex,
-                    align_items: :center,
+                    align_items: :flex_start,
                     justify_content: :center,
                     text_align: :center,
                     classes: "SelectPanel-loadingPanel"
                   )) do %>
-                    <div data-hide-on-error>
+                    <div data-hide-on-error class="pt-2">
                       <%= render Primer::Beta::Spinner.new(aria: { label: @loading_label, describedby: @loading_description_id }, data: { target: "select-panel.bodySpinner" }) %>
                       <% if @loading_description.present? %>
                         <div id="<%= @loading_description_id %>" aria-hidden="true"><%= @loading_description %></div>
@@ -92,7 +92,7 @@
                 <%= render(@list) %>
               <% end %>
             </div>
-            <div data-target="select-panel.noResults" class="color-border-muted text-center d-flex flex-items-center flex-justify-center SelectPanel-emptyPanel" hidden>
+            <div data-target="select-panel.noResults" class="pt-2 color-border-muted text-center d-flex flex-items-start flex-justify-center SelectPanel-emptyPanel" hidden>
               <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
             </div>
           <% end %>