Rework CSS grid for topics in listings

This was mostly motivated by a hope that this will help with the
mysterious iOS 12 bug that's causing topic listings to behave strangely
when the user tries to tap on the comments link (space gets added and
the link moves down).

The main change here is to add a new .topic-with-excerpt class, and only
add the "content" area to the CSS grid when that class is present,
instead of always adding it and just leaving it empty if the topic has
no excerpt.

In addition, this switches to using grid-gap to space out the rows
instead of margins, and center-aligns the row contents vertically on
mobile, where we want them spaced out a little to help avoid misclicks.

tildes/scss/modules/_topic.scss

@@ -15,20 +15,21 @@
   grid-template-areas:
     "title    voting"
     "metadata voting"
-    "content  voting"
     "info     info";
   grid-template-columns: 1fr auto;
+  grid-gap: 0.2rem;
 
   // set some minimum row heights on mobile to space them out a bit
-  grid-template-rows:
-    auto
-    minmax($min-touch-size, auto)
-    auto
-    minmax($min-touch-size, auto);
+  $row-height: $min-touch-size - 4px;  // subtract grid-gap
+  grid-template-rows: repeat(3, minmax($row-height, auto));
+
+  // on larger screens, rows can size automatically
   @media (min-width: $size-md) {
-    grid-template-rows: auto auto minmax(0, auto) auto;
+    grid-template-rows: auto;
   }
 
+  align-items: center;
+
   position: relative;
 
   padding-left: 0.2rem;
@@ -40,7 +41,6 @@
 
   header {
     grid-area: title;
-    margin-bottom: 0.2rem;
     display: flex;
     min-height: 1rem;
   }
@@ -111,7 +111,6 @@
 .topic-metadata {
   display: flex;
   align-items: baseline;
-  margin-bottom: 0.2rem;
   max-height: 4rem;
   overflow: hidden;
 }
@@ -166,7 +165,7 @@
   }
 
   max-width: none;
-  margin: 0 0.2rem 0.2rem 0;
+  margin: 0;
   font-style: italic;
 
   h1 {
@@ -272,6 +271,17 @@
   }
 }
 
+.topic-with-excerpt {
+  // on larger screens only, add the "content" grid area
+  @media (min-width: $size-md) {
+    grid-template-areas:
+      "title    voting"
+      "metadata voting"
+      "content  voting"
+      "info     info";
+  }
+}
+
 .is-topic-mine {
   border-left: 3px solid;
   margin-left: -3px;

tildes/tildes/templates/macros/topics.jinja2

@@ -178,6 +178,10 @@
     {% do classes.append('is-topic-official') %}
   {% endif %}
 
+  {% if topic.content_excerpt %}
+    {% do classes.append("topic-with-excerpt") %}
+  {% endif %}
+
   {{ classes|join(' ') }}
 {% endmacro %}