Adjust comment label button display a little

* Enables wrapping when the buttons will go offscreen
* Turns on minimum touch size
* Adds a "..." on the labels that require a reason
* Moves the info about the cooldown on Exemplary into the prompt

tildes/scss/modules/_btn.scss

@@ -67,6 +67,8 @@
 }
 
 .btn-comment-label {
+  @include min-touch-size;
+
   display: inline-flex;
   align-items: center;
   margin: 0 0.4rem;

tildes/scss/modules/_comment.scss

@@ -99,6 +99,8 @@
 
 .comment-label-buttons {
   display: flex;
+  flex-wrap: wrap;
+
   margin: 0;
   padding: 0 1rem;
   justify-content: space-between;
@@ -112,12 +114,6 @@
   font-size: 0.6rem;
 }
 
-.comment-label-note {
-  font-size: 0.5rem;
-  font-style: italic;
-  text-align: center;
-}
-
 .comment-text {
   padding: 0.2rem;
   padding-left: 0.4rem;

tildes/tildes/enums.py

@@ -51,8 +51,9 @@ class CommentLabelOption(enum.Enum):
         """Return the reason prompt for this label, if any."""
         if self.name == "EXEMPLARY":
             return (
-                "What makes this comment exemplary? "
-                "(required, visible to the comment's author anonymously)"
+                "Write a short message to say thanks or explain why you appreciated "
+                "this comment (required, visible to the comment's author anonymously)"
+                "\n\nYou will not be able to use this label again for 8 hours."
             )
         if self.name == "MALICE":
             return "Why is this malicious? (required, will only be visible to admins)"

tildes/tildes/templates/macros/comments.jinja2

@@ -260,10 +260,9 @@
             {% if label.reason_prompt %}
               data-js-reason-prompt="{{ label.reason_prompt }}"
             {% endif %}
-          >{{ label.name|lower }}</a>
-          {% if label.name == "EXEMPLARY" %}
-            <div class="comment-label-note">One per 8 hours</div>
-          {% endif %}
+          >
+            {{ label.name|lower }}{% if label.reason_prompt %}...{% endif %}
+          </a>
         </li>
       {% endfor %}
     </ul>