From 0dcdfaaa8a846cbb16af417c1ca289ccd328b374 Mon Sep 17 00:00:00 2001
From: Dan Gowans <dangowans@users.noreply.github.com>
Date: Tue, 29 Apr 2025 13:44:33 -0400
Subject: [PATCH] fix small screen alignment

---
 views/admin-tables.ejs | 140 ++++++++++++++++++-----------------------
 1 file changed, 60 insertions(+), 80 deletions(-)

diff --git a/views/admin-tables.ejs b/views/admin-tables.ejs
index 5afb6689..bcf2c203 100644
--- a/views/admin-tables.ejs
+++ b/views/admin-tables.ejs
@@ -35,23 +35,19 @@
     
     <div class="panel">
       <div class="panel-heading">
-        <div class="level is-mobile">
-          <div class="level-left">
-            <div class="level-item">
-              <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Types" type="button" aria-label="Toggle Work Order Types">
-                <span class="icon">
-                  <i class="fas fa-plus" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
-            <div class="level-item">
-              <h2 class="title is-5 has-text-white">Work Order Types</h2>
-            </div>
+        <div class="columns is-vcentered is-mobile">
+          <div class="column is-narrow">
+            <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Types" type="button" aria-label="Toggle Work Order Types">
+              <span class="icon">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+              </span>
+            </button>
           </div>
-          <div class="level-right">
-            <div class="level-item">
-              <i class="fas fa-hard-hat" aria-hidden="true"></i>
-            </div>
+          <div class="column">
+            <h2 class="title is-5 has-text-white">Work Order Types</h2>
+          </div>
+          <div class="column is-narrow">
+            <i class="fas fa-hard-hat" aria-hidden="true"></i>
           </div>
         </div>
       </div>
@@ -88,23 +84,19 @@
 
     <div class="panel">
       <div class="panel-heading">
-        <div class="level is-mobile">
-          <div class="level-left">
-            <div class="level-item">
-              <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Milestone Types" type="button" aria-label="Toggle Work Order Milestone Types">
-                <span class="icon">
-                  <i class="fas fa-plus" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
-            <div class="level-item">
-              <h2 class="title is-5 has-text-white">Work Order Milestone Types</h2>
-            </div>
+        <div class="columns is-vcentered is-mobile">
+          <div class="column is-narrow">
+            <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Milestone Types" type="button" aria-label="Toggle Work Order Milestone Types">
+              <span class="icon">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+              </span>
+            </button>
           </div>
-          <div class="level-right">
-            <div class="level-item">
-              <i class="fas fa-hard-hat" aria-hidden="true"></i>
-            </div>
+          <div class="column">
+            <h2 class="title is-5 has-text-white">Work Order Milestone Types</h2>
+          </div>
+          <div class="column is-narrow">
+            <i class="fas fa-hard-hat" aria-hidden="true"></i>
           </div>
         </div>
       </div>
@@ -141,23 +133,19 @@
 
     <div class="panel">
       <div class="panel-heading">
-        <div class="level is-mobile">
-          <div class="level-left">
-            <div class="level-item">
-              <button class="button is-small is-toggle-button" data-tooltip="Toggle Committal Types" type="button" aria-label="Toggle Committal Types">
-                <span class="icon">
-                  <i class="fas fa-plus" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
-            <div class="level-item">
-              <h2 class="title is-5 has-text-white">Committal Types</h2>
-            </div>
+        <div class="columns is-vcentered is-mobile">
+          <div class="column is-narrow">
+            <button class="button is-small is-toggle-button" data-tooltip="Toggle Committal Types" type="button" aria-label="Toggle Committal Types">
+              <span class="icon">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+              </span>
+            </button>
           </div>
-          <div class="level-right">
-            <div class="level-item">
-              <i class="fas fa-file-contract" aria-hidden="true"></i>
-            </div>
+          <div class="column">
+            <h2 class="title is-5 has-text-white">Committal Types</h2>
+          </div>
+          <div class="column is-narrow">
+            <i class="fas fa-file-contract" aria-hidden="true"></i>
           </div>
         </div>
       </div>
@@ -194,23 +182,19 @@
     
     <div class="panel">
       <div class="panel-heading">
-        <div class="level is-mobile">
-          <div class="level-left">
-            <div class="level-item">
-              <button class="button is-small is-toggle-button" data-tooltip="Toggle Interment Container Types" type="button" aria-label="Toggle Interment Container Types">
-                <span class="icon">
-                  <i class="fas fa-plus" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
-            <div class="level-item">
-              <h2 class="title is-5 has-text-white">Interment Container Types</h2>
-            </div>
+        <div class="columns is-vcentered is-mobile">
+          <div class="column is-narrow">
+            <button class="button is-small is-toggle-button" data-tooltip="Toggle Interment Container Types" type="button" aria-label="Toggle Interment Container Types">
+              <span class="icon">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+              </span>
+            </button>
           </div>
-          <div class="level-right">
-            <div class="level-item">
-              <i class="fas fa-file-contract" aria-hidden="true"></i>
-            </div>
+          <div class="column">
+            <h2 class="title is-5 has-text-white">Interment Container Types</h2>
+          </div>
+          <div class="column is-narrow">
+            <i class="fas fa-file-contract" aria-hidden="true"></i>
           </div>
         </div>
       </div>
@@ -256,23 +240,19 @@
     
     <div class="panel">
       <div class="panel-heading">
-        <div class="level is-mobile">
-          <div class="level-left">
-            <div class="level-item">
-              <button class="button is-small is-toggle-button" data-tooltip="Toggle Burial Site Statuses" type="button" aria-label="Toggle Burial Site Statuses">
-                <span class="icon">
-                  <i class="fas fa-plus" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
-            <div class="level-item">
-              <h2 class="title is-5 has-text-white">Burial Site Statuses</h2>
-            </div>
+        <div class="columns is-vcentered is-mobile">
+          <div class="column is-narrow">
+            <button class="button is-small is-toggle-button" data-tooltip="Toggle Burial Site Statuses" type="button" aria-label="Toggle Burial Site Statuses">
+              <span class="icon">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+              </span>
+            </button>
           </div>
-          <div class="level-right">
-            <div class="level-item">
-              <i class="fas fa-vector-square" aria-hidden="true"></i>
-            </div>
+          <div class="column">
+            <h2 class="title is-5 has-text-white">Burial Site Statuses</h2>
+          </div>
+          <div class="column is-narrow">
+            <i class="fas fa-vector-square" aria-hidden="true"></i>
           </div>
         </div>
       </div>