From aed7b63fc4526a28539b41bdcb4c38a41fa24131 Mon Sep 17 00:00:00 2001
From: Devang Saklani <devangsaklani@gmail.com>
Date: Tue, 9 Sep 2025 13:39:04 +0530
Subject: [PATCH] Fixes buttons getting out of view on mobile screens less than
 450px #5978 (#6113)

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/pages/Details.vue | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 732d58e31..0ba0a44eb 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -944,10 +944,6 @@ export default {
 }
 
 @media (max-width: 550px) {
-    .functions {
-        text-align: center;
-    }
-
     .ping-chart-wrapper {
         padding: 10px !important;
     }
@@ -957,20 +953,27 @@ export default {
     }
 }
 
-@media (max-width: 400px) {
+@media (max-width: 450px) {
     .btn {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: center;
         padding-top: 10px;
         font-size: 0.9em;
     }
 
-    a.btn {
-        padding-left: 25px;
-        padding-right: 25px;
-    }
+    .btn-group {
+        width: 100%;
 
+        .btn, a.btn {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+}
+
+@media (max-width: 400px) {
     .dropdown-clear-data {
         button {
             display: block;