From 6eea7f19653d73c1e5c15019b4f39b589f5b43be Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Wed, 3 Aug 2022 07:20:30 +0100
Subject: [PATCH] Use the alternative nowrap helper for options alignment

---
 core/templates/base.html                   |  6 ++
 core/templates/ui/drilldown/drilldown.html | 21 +++---
 core/templates/ui/drilldown/results.html   | 87 ++++++++++++----------
 3 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/core/templates/base.html b/core/templates/base.html
index d20cc8c..5790527 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -48,6 +48,12 @@
         white-space: -o-pre-wrap;   /* Opera 7 */
         word-wrap: break-word;      /* IE */
       }
+      .nowrap-parent {
+        white-space: nowrap;
+      }
+      .nowrap-child {
+        display: inline-block;
+      }
       .slider-output {
         width: 4rem !important;
       }
diff --git a/core/templates/ui/drilldown/drilldown.html b/core/templates/ui/drilldown/drilldown.html
index c7aaae3..1366ea4 100644
--- a/core/templates/ui/drilldown/drilldown.html
+++ b/core/templates/ui/drilldown/drilldown.html
@@ -38,17 +38,16 @@
           </div>
         </div>
         <div class="column is-3">
-          <div style="overflow: hidden;">
-                <div
-                  _="on click toggle .is-hidden on #options"
-                  class="button is-light has-text-link is-right"
-                  style="float: left;">
-                  Options
-                </div>
-              <div>
-                <span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
-              </div>
+          <div class="nowrap-parent">
+            <div
+              _="on click toggle .is-hidden on #options"
+              class="button is-light has-text-link is-right nowrap-child">
+              Options
+            </div>
+            <div class="nowrap-child">
+              <span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
             </div>
+          </div>
         </div>
       </div>
 
@@ -132,7 +131,7 @@
           <label class="checkbox">
             <input type="checkbox" name="check-sentiment"
               _="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
-            Check sentiment
+              Check sentiment
           </label>
         </div>
       </div>
diff --git a/core/templates/ui/drilldown/results.html b/core/templates/ui/drilldown/results.html
index 302e90c..207c751 100644
--- a/core/templates/ui/drilldown/results.html
+++ b/core/templates/ui/drilldown/results.html
@@ -5,29 +5,28 @@
   <div style="display: none" id="jsonData" data-json="{{ data }}">
   </div>
 
-  <div class="has-text-grey-light level">
-    <div class="level-left">
-      <div class="level-item">
+  <div class="has-text-grey-light nowrap-parent">
+      <div class="nowrap-child block">
         <i class="fa-solid fa-chart-mixed"></i>
       </div>
-      <div class="level-item">
+      <div class="nowrap-child">
         <p>{{ card }} hits</p>
       </div>
       {% if redacted != 0 %}
-      <div class="level-item">
+      <div class="nowrap-child">
           <p>{{ redacted }} redacted</p>
        </div>
       {% endif %}
 
+
+      <div class="nowrap-child">
+        <p>{{ took }}ms</p>
+      </div>
       {% if exemption is not None %}
-      <div class="level-item">
-          <p>god mode</p>
+      <div class="nowrap-child">
+        <i class="fa-solid fa-book-bible"></i>
       </div>
       {% endif %}
-      <div class="level-item">
-        <p>{{ took }}ms</p>
-      </div>
-    </div>
   </div>
   <div class="box">
     <div style="height: 30rem">
@@ -119,27 +118,33 @@
               <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
               <td>{{ item.host }}</td>
               <td>
-                {% if item.online is True %}
-                  <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
-                    <i class="fa-solid fa-circle"></i>
-                  </span>
-                  {{ item.nick }}
-                {% elif item.online is False %}
-                  <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
-                    <i class="fa-solid fa-circle"></i>
-                  </span>
-                  {{ item.nick }}
-                {% else %}
-                  <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
-                    <i class="fa-solid fa-circle"></i>
-                  </span>
-                  {{ item.nick }}
-                {% endif %}
-                {% if item.num_chans is not None %}
-                  <span class="tag">
-                    {{ item.num_chans }}
-                  </span>
-                {% endif %}
+                <div class="nowrap-parent">
+                  <div class="nowrap-child">
+                    {% if item.online is True %}
+                      <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
+                        <i class="fa-solid fa-circle"></i>
+                      </span>
+                    {% elif item.online is False %}
+                      <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
+                        <i class="fa-solid fa-circle"></i>
+                      </span>
+                    {% else %}
+                      <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
+                        <i class="fa-solid fa-circle"></i>
+                      </span>
+                    {% endif %}
+                  </div>
+                  <div class="nowrap-child">
+                    {{ item.nick }}
+                  </div>
+                    {% if item.num_chans is not None %}
+                    <div class="nowrap-child">
+                      <span class="tag">
+                        {{ item.num_chans }}
+                      </span>
+                    </div>
+                    {% endif %}
+                </div>
               </td>
               <td>
                 {% if item.src == 'irc' %}
@@ -155,12 +160,18 @@
                 {% endif %}
               </td>
               <td>
-                {{ item.channel }}
-                {% if item.num_users is not None %}
-                  <span class="tag">
-                    {{ item.num_users }}
-                  </span>
-                {% endif %}
+                <div class="nowrap-parent">
+                  <div class="nowrap-child">
+                    {{ item.channel }}
+                  </div>
+                  {% if item.num_users is not None %}
+                    <div class="nowrap-child">
+                      <span class="tag">
+                        {{ item.num_users }}
+                      </span>
+                    </div>
+                  {% endif %}
+                </div>
               </td>
               <td>{{ item.net }}</td>
             </tr>