Debbuger buttons no longer overflow

Author: Valmontechno

addons/debugger/style.css

@@ -40,6 +40,7 @@
 .sa-debugger-interface [class*="card_header-buttons_"] {
   background-color: #29beb8;
   border-color: #3aa8a4;
+  text-wrap-mode: nowrap;
 }
 
 .sa-debugger-interface h1 {
@@ -89,6 +90,18 @@
   filter: none;
 }
 
+.sa-debugger-header-buttons {
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(4, 1fr);
+  direction: rtl;
+}
+
+.sa-debugger-header-buttons > div {
+  min-width: 0;
+}
+
 .sa-debugger-header-buttons img {
   width: 20px;
   height: 20px;

addons/debugger/userscript.js

@@ -514,11 +514,11 @@ export default async function ({ addon, console, msg }) {
     tabContentContainer.appendChild(tab.content);
 
     removeAllChildren(buttonContainerElement);
-    buttonContainerElement.appendChild(unpauseButton.element);
+    buttonContainerElement.prepend(unpauseButton.element);
     for (const button of tab.buttons) {
-      buttonContainerElement.appendChild(button.element);
+      buttonContainerElement.prepend(button.element);
     }
-    buttonContainerElement.appendChild(closeButton.element);
+    buttonContainerElement.prepend(closeButton.element);
 
     if (isInterfaceVisible) {
       activeTab.show();