Use the alternative nowrap helper for options alignment

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;
       }

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>

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>