fix

views/partials/popover-usage.html

@@ -56,7 +56,7 @@
                     </button>
                 </div>
                 <!-- Row with text and buttons -->
-                <div class="level">
+                <div class="level is-mobile">
                     <div class="level-left">
                         <button class="button is-small" hx-get="/loadUsageKPI?month={{ DateID }}&offset=-1"
                             hx-swap="outerHTML" hx-target="#usage-dropdown">
@@ -112,4 +112,20 @@
             totalCountCells[i].classList.remove('is-hidden');
         }
     })
-</script>
+</script>
+
+<style>
+    .level {
+        width: 100%;
+        /* Ensure the level takes the full width of its container */
+        max-width: 300px;
+        /* Set a max-width to keep the popover size consistent */
+        margin: 0 auto;
+        /* Center the level horizontally */
+    }
+
+    .level-item p {
+        white-space: nowrap;
+        /* Prevent the text from wrapping */
+    }
+</style>