Improve top nav support on mobile for responsive design pages

Before this change, pages that opt in with `use_responsive_design`
would often have the top nav be real cluttered for logged-in users. (I
think I happened to first test this responsive design without being
logged in on my dev box, oops!) Because the home link and `#userbar`
were absolutely positioned on the page, they would frequently overlap.

Here, I stop doing our old tricks to make the top nav load last on the
page. (This was to get "main content" loading faster, which I think is
a. not as relevant today with more commonly faster connections, and b.
was a bit naive to think that it'd be helpful to have to wait a long
time to _navigate_ if a page is unexpectedly large.)

These tricks used to leave some padding at the top of the `#container`,
which these elements would then visually fill via `position: absolute`
once they load.

Next, I update the CSS (for the responsive design pages only) to use
the new `#main-nav` container to lay them out in Flexbox: all in one
row if possible, or wrapped if needed.

Some designs hide stuff like this into a hamburger menu or such when
the screen gets small. I haven't done that here! No specific reason,
I'm just not sold that it's that much better, or worth the trouble.

I tested this on the following combinations:
1. Logged out, homepage
2. Logged in, homepage
3. Logged out, `/items`
4. Logged in, `/items`
5. Logged out, `/items/89487-Dyeworks-Purple-Haunted-Sky-Background`
6. Logged in, `/items/89487-Dyeworks-Purple-Haunted-Sky-Background`

Hope it's solid! 🤞

app/assets/stylesheets/_responsive.sass

@@ -3,10 +3,20 @@ body.use-responsive-design
         max-width: 100%
         padding-inline: 1rem
         box-sizing: border-box
+        padding-top: 0
+
+    #main-nav
+        display: flex
+        flex-wrap: wrap
+
+    #home-link, #userbar
+        position: static
 
     #home-link
-        margin-left: 1rem
+        padding-inline: .5rem
-        padding-inline: 0
+        margin-inline: -.5rem
+        margin-right: auto
 
     #userbar
-        margin-right: 1rem
+        margin-left: auto
+        text-align: right

app/views/layouts/application.html.haml

@@ -29,18 +29,7 @@
     = render 'analytics'
   %body{:class => body_class}
     #container
-      = yield :before_title
+      %nav#main-nav
-      = render 'announcement'
-      - if content_for?(:title) && show_title_header?
-        %h1#title= yield :title
-      = yield :before_flashes
-      = flashes
-
-      - if content_for? :content
-        = yield(:content)
-      - else
-        = yield
-
         - if home_link?
           %a#home-link{:href => root_path}
             %span= t 'app_name'
@@ -60,6 +49,18 @@
               id: 'userbar-log-in', "data-turbo-prefetch": false do
               %span= t('.userbar.login')
 
+      = yield :before_title
+      = render 'announcement'
+      - if content_for?(:title) && show_title_header?
+        %h1#title= yield :title
+      = yield :before_flashes
+      = flashes
+
+      - if content_for? :content
+        = yield(:content)
+      - else
+        = yield
+
       #footer
         = form_tag choose_locale_path, :id => 'locale-form' do
           = hidden_field_tag 'return_to', request.fullpath