Fix wasted space at certain width in stacktrace UI

* The "collapse" etc. buttons get shown below the search box and < << >> > from
  a certain width downwards.

* similar stacking for the date/type/value and the buttons at an even smaller width.

See #120

issues/templates/issues/stacktrace.html

@@ -28,7 +28,7 @@
 
 {% for exception in exceptions %}
 
-    <div class="flex">
+    <div class="flex items-start flex-col-reverse lg:flex-row">
         <div class="overflow-hidden">
             {% if forloop.counter0 == 0 %}
             <div class="italic">{{ event.ingested_at|date:"j M G:i T" }} (Event {{ event.digest_order|intcomma }} of {{ issue.digested_event_count|intcomma }} total{% if q %} — {{ event_qs_count|intcomma }} found by search{% endif %})</div>
@@ -38,13 +38,15 @@
 
         </div>
         {% if forloop.counter0 == 0 %}
-        <div class="ml-auto flex-none">
-            <div class="flex place-content-end">
+        <div class="ml-auto flex flex-none flex-col-reverse 3xl:flex-row"> {# container of 2 divs: one for buttons, one for event-nav; on smaller screens these are 2 rows; on bigger they are side-by-side  #}
+            <div class="flex place-content-end self-stretch pt-2 3xl:pt-0 {# <= to keep the buttons apart #} pb-4 lg:pb-0 {# <= to keep the buttons & h1-block apart #}">
                 <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring" onclick="showAllFrames()">Show all</button>
                 <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring" onclick="showInAppFrames()">Show in-app</button>
                 <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring" onclick="showRaisingFrame()">Show raise</button>
                 <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring" onclick="hideAllFrames()">Collapse all</button>
 
+            </div>
+            <div class="flex place-content-end">
                 {% include "issues/_event_nav.html" %}
             </div>
         </div>

theme/static_src/tailwind.config.js

@@ -49,6 +49,9 @@ module.exports = {
     ],
     theme: {
       extend: {
+        screens: {
+          '3xl': '1920px',
+        },
         spacing: {
           '128': '32rem',
         },