modqueue: improve layout on mobile.

* Switch layout from float to flexbox.
* Collapse to one column layout on mobile (thumbnails above post info).
* Wordbreak overly long sources.

app/javascript/src/styles/base/020_base.scss

@@ -133,6 +133,7 @@ table tfoot {
 
   .column-expand { flex: 1; }
   .column-shrink { flex: 0; }
+  @media (max-width: 660px) { display: block; }
 }
 
 ul.list-bulleted {

app/javascript/src/styles/specific/mod_queue.scss.erb

@@ -2,6 +2,7 @@
 
 div#c-moderator-post-queues {
   div.post {
+    padding: 1em;
     margin-bottom: 4em;
     overflow: hidden;
 
@@ -13,16 +14,28 @@ div#c-moderator-post-queues {
       background: var(--modqueue-negative-score-background-color);
     }
 
-    aside {
+    aside.column {
-      float: left;
+      text-align: center;
-      width: 220px;
+      margin-bottom: 1em;
-      text-align: right;
+
-      padding-right: 20px;
+      @media (min-width: 660px) {
+        flex-basis: 220px;
+        text-align: right;
+        padding-right: 2em;
+      }
     }
 
-    section {
+    .quick-mod {
-      float: left;
+      margin-bottom: 0.5em;
-      width: 800px;
+
+      @media (min-width: 660px) {
+        font-size: $h2_size;
+        font-weight: bold;
+      }
+    }
+
+    .mod-queue-post-source {
+      word-break: break-all;
     }
 
     <% Danbooru.config.modqueue_quality_warning_tags.each do |tag| %>
@@ -49,12 +62,4 @@ div#c-moderator-post-queues {
       }
     }
   }
-
-  div#moderation-guideline {
-    width: 900px;
-
-    h1 {
-      font-size: $h2_size;
-    }
-  }
 }

app/views/moderator/post/queues/_post.html.erb

@@ -1,12 +1,12 @@
-<%= content_tag(:div, { id: "post-#{post.id}", class: ["post", "mod-queue-preview", *PostPresenter.preview_class(post, highlight_score: true)].join(" ") }.merge(PostPresenter.data_attributes(post))) do %>
+<%= content_tag(:div, { id: "post-#{post.id}", class: ["post", "mod-queue-preview", "column-container", *PostPresenter.preview_class(post, highlight_score: true)].join(" ") }.merge(PostPresenter.data_attributes(post))) do %>
-  <aside>
+  <aside class="column column-shrink">
     <%= link_to(image_tag(post.preview_file_url), post_path(post), :target => "_blank") %>
   </aside>
 
-  <section>
+  <section class="column column-expand">
     <ul>
       <li>
-        <h2><%= render "moderator/post/queues/quick_mod", post: post %></h2>
+        <%= render "moderator/post/queues/quick_mod", post: post %>
       </li>
       <li><strong>Rating</strong>: <%= post.pretty_rating %></li>
       <li><strong>Score</strong>: <%= post.score %></li>
@@ -27,7 +27,7 @@
       <li>
         <strong>Hidden</strong>: <%= render "post_disapprovals/compact_counts", :disapprovals => post.disapprovals, :post => post %>
       </li>
-      <li><strong>Source</strong>: <%= post.source %></li>
+      <li class="mod-queue-post-source"><strong>Source</strong>: <%= post.source %></li>
       <% if post.has_active_pools? %>
         <li><strong>Pools</strong>: <%= render "pools/inline_list", pools: post.pools.undeleted %></li>
       <% end %>

app/views/moderator/post/queues/show.html.erb

@@ -9,8 +9,8 @@
         <%= f.submit "Search" %>
       <% end %>
 
-      <div id="moderation-guideline">
+      <div id="moderation-guideline" class="fixed-width-container">
-        <h1>Deletion Guidelines</h1>
+        <h2>Deletion Guidelines</h2>
 
         <%= render "desc" %>