Make the "Details" screen fit better on mobile screens.

static/css/details.css

@@ -34,6 +34,10 @@
     display: inline;
 }
 
+#how-to-ping code {
+    overflow-wrap: break-word;
+}
+
 #details-schedule th {
     padding-top: 4px;
 }
@@ -82,7 +86,7 @@
 }
 
 #downtimes table {
-    width: 350px;
+    max-width: 350px;
 }
 
 #downtimes tr:first-child td, #downtimes tr:first-child th {
@@ -104,7 +108,6 @@
     padding: 32px;
 }
 
-
 ul.checkmarks {
     padding-left: 20px;
     list-style: none;

templates/front/details.html

@@ -64,7 +64,7 @@
             {% endif %}
         </div>
 
-        <div class="details-block">
+        <div id="how-to-ping" class="details-block">
             <h2>How To Ping</h2>
             <div>
                 <p>Keep this check up by making HTTP requests to this URL:</p>
@@ -220,7 +220,9 @@
                     data-toggle="modal"
                     data-target="#transfer-modal"
                     data-url="{% url 'hc-transfer' check.code %}"
-                    class="btn btn-sm btn-default">Transfer to Another Project&hellip;</button>
+                    class="btn btn-sm btn-default">
+                    Transfer<span class="hidden-sm hidden-xs"> to Another Project</span>&hellip;
+                </button>
                 &nbsp;
                 <button
                     id="details-remove-check"
@@ -235,7 +237,7 @@
     <div id="events" class="col-sm-7">
         <h2>
             Log
-            <small>Click on individual items for details</small>
+            <small class="hidden-xs">Click on individual items for details</small>
             <div id="format-switcher" class="btn-group pull-right" data-toggle="buttons">
                 <label class="btn btn-default btn-xs" data-format="UTC">
                     <input type="radio" name="date-format">

templates/front/details_events.html

@@ -92,7 +92,7 @@
     </p>
 {% else %}
     <div class="alert no-events">
-        You will see a live-updating log of received pings here. <br />
+        You will see a <span class="hidden-xs">live-updating</span> log of received pings here. <br />
         This check has not received any pings yet.
     </div>
 {% endif %}