From b0c1d422889c6ad508831f86df5eb2e683373649 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Tue, 8 Jul 2025 18:19:37 +0100
Subject: [PATCH] zooming out keeps the button container a usable size

---
 .../main/resources/static/css/multi-tool.css  | 76 +++++++++++++++++--
 1 file changed, 71 insertions(+), 5 deletions(-)

diff --git a/stirling-pdf/src/main/resources/static/css/multi-tool.css b/stirling-pdf/src/main/resources/static/css/multi-tool.css
index fcbccc1a2..4e0fa3bd9 100644
--- a/stirling-pdf/src/main/resources/static/css/multi-tool.css
+++ b/stirling-pdf/src/main/resources/static/css/multi-tool.css
@@ -53,16 +53,15 @@ label {
 }
 
 .mt-action-btn {
-  position: sticky;
-  bottom: 10%;
-  margin: auto;
-  margin-bottom: 25px;
+  position: fixed;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
   border-radius: 2rem;
   z-index: 12;
   background-color: var(--md-sys-color-surface-container-low);
   display: flex;
   gap: 10px;
-  padding: 12px 0px 0px;
   width: fit-content;
   justify-content: center;
   padding: 10px 20px;
@@ -399,6 +398,72 @@ label {
 @media only screen and (min-width: 1200px) and (max-width: 1399px) { #pages-container { width: 900px; } }
 @media only screen and (min-width: 1399px) { #pages-container { width: 1200px; } }
 
+/* Zoom-out optimizations for bottom action buttons */
+@media only screen and (min-width: 2000px) {
+  .mt-action-btn {
+    gap: 12px;
+    padding: 12px 24px;
+    border-radius: 2.5rem;
+  }
+  .mt-action-btn .btn {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 22px;
+  }
+  .mt-action-btn .btn .material-symbols-rounded {
+    font-size: 1.7rem;
+  }
+}
+
+@media only screen and (min-width: 2560px) {
+  .mt-action-btn {
+    gap: 15px;
+    padding: 15px 30px;
+    border-radius: 3rem;
+  }
+  .mt-action-btn .btn {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 28px;
+  }
+  .mt-action-btn .btn .material-symbols-rounded {
+    font-size: 2.1rem;
+  }
+}
+
+@media only screen and (min-width: 3840px) {
+  .mt-action-btn {
+    gap: 20px;
+    padding: 20px 40px;
+    border-radius: 4rem;
+  }
+  .mt-action-btn .btn {
+    width: 7rem;
+    height: 7rem;
+    border-radius: 40px;
+  }
+  .mt-action-btn .btn .material-symbols-rounded {
+    font-size: 3rem;
+  }
+}
+
+@media only screen and (min-width: 7680px) {
+  .mt-action-btn {
+    gap: 40px;
+    padding: 40px 80px;
+    border-radius: 8rem;
+  }
+  .mt-action-btn .btn {
+    width: 14rem;
+    height: 14rem;
+    border-radius: 80px;
+  }
+  .mt-action-btn .btn .material-symbols-rounded {
+    font-size: 6rem;
+  }
+}
+
+
 /* 125% Zoom Level */
 @media only screen and (max-width: 1536px) {
   /* Styles for 125% zoom level (1920px ÷ 1.25 = 1536px) */
@@ -419,6 +484,7 @@ label {
     top: 80px !important; /* Just below navbar (60px) + 20px margin */
     bottom: 20px !important; /* Small margin from bottom */
     margin: 0 !important;
+    transform: none !important; /* Reset transform for sidebar */
 
     /* Container styling */
     border-radius: 16px !important; /* Consistent with card styling */