Add responsive layout for item page

We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅

And then, I fix up a couple things on the item page (including in the
general items layout) to match!

I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!

app/assets/stylesheets/_items.sass

@@ -5,9 +5,15 @@ body.items-index, body.items-show, body.items-needed, body.item_trades
 
   text-align: center
 
+  .item-search-form
+    display: flex
+    gap: .5em
+    justify-content: center
+
     input[type=text]
       font-size: 125%
       width: 15em
+      flex: 0 1 auto
 
   h1
     margin-bottom: 1em

app/assets/stylesheets/_responsive.sass

@@ -0,0 +1,12 @@
+body.use-responsive-design
+    #container
+        max-width: 100%
+        padding-inline: 1rem
+        box-sizing: border-box
+
+    #home-link
+        margin-left: 1rem
+        padding-inline: 0
+
+    #userbar
+        margin-right: 1rem

app/assets/stylesheets/application.css.sass

@@ -4,6 +4,7 @@
 @import partials/clean/mixins
 
 @import layout
+@import responsive
 
 @import partials/jquery.jgrowl
 

app/assets/stylesheets/partials/_item_header.sass

@@ -35,6 +35,7 @@
       text-align: left
       display: flex
       align-items: center
+      flex-wrap: wrap
       gap: 1em
 
       abbr
@@ -127,6 +128,7 @@
   .item-subpages-nav
     display: flex
     align-items: flex-end
+    gap: 1em
 
     .preview-link
       margin-right: auto

app/helpers/application_helper.rb

@@ -231,6 +231,15 @@ module ApplicationHelper
     @hide_title_header = true
   end
 
+  def use_responsive_design
+    @use_responsive_design = true
+    add_body_class "use-responsive-design"
+  end
+
+  def use_responsive_design?
+    @use_responsive_design || false
+  end
+
   def signed_in_meta_tag
     %(<meta name="user-signed-in" content="#{user_signed_in?}">).html_safe
   end

app/views/items/show.html.haml

@@ -1,5 +1,6 @@
 - title @item.name
 - canonical_path @item
+- use_responsive_design
 
 = render partial: "item_header",
   locals: {item: @item, trades: @trades, current_subpage: "preview",

app/views/layouts/application.html.haml

@@ -13,6 +13,8 @@
     %link{href: image_path('favicon.png'), rel: 'icon'}
     = yield :stylesheets
     = stylesheet_link_tag "application"
+    - if use_responsive_design?
+      %meta{name: "viewport", content: "width=device-width, initial-scale=1"}
     = yield :meta
     = open_graph_tags
     = csrf_meta_tag

app/views/layouts/items.html.haml

@@ -7,7 +7,7 @@
       = image_tag 'https://images.neopets.com/items/mall_floatingneggfaerie.gif'
       %span= t 'infinite_closet'
 - content_for :content do
-  = form_tag items_path, :method => :get do
+  = form_tag items_path, method: :get, class: "item-search-form" do
     = text_field_tag :q, @query.to_s
     = submit_tag t('.search'), :name => nil
   = yield