From 706a77c5d3875200ad8460d08a3fb9c01b3bcdba Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Tue, 28 Jan 2025 17:14:47 -0500
Subject: [PATCH] Added btn-responsive style class to define buttons to go full
 block level while in mobile and to stay defined size in non mobile response

---
 includes/header.php | 24 ++++++++++++++++++++++++
 user_details.php    |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/includes/header.php b/includes/header.php
index ac886ac6..e530bb28 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -39,6 +39,30 @@ header("X-Frame-Options: DENY");
     <link href='plugins/daterangepicker/daterangepicker.css' rel='stylesheet' />
     <link href="plugins/toastr/toastr.min.css" rel="stylesheet">
     <link href="plugins/DataTables/datatables.min.css" rel="stylesheet">
+    <!-- CSS to allow regular button to show as block button in mobile response view using the class btn-responsive -->
+    <style>
+        /* 
+           For screens below 576px (xs): 
+           - Make the button full-width, display:block 
+        */
+        @media (max-width: 575.98px) {
+          .btn-responsive {
+            display: block;
+            width: 100%;
+          }
+        }
+
+        /* 
+           For screens 576px (sm) and above:
+           - Revert to an inline style 
+        */
+        @media (min-width: 576px) {
+          .btn-responsive {
+            display: inline-block;
+            width: auto;
+          }
+        }
+    </style>
 
     <!-- jQuery -->
     <script src="plugins/jquery/jquery.min.js"></script>
diff --git a/user_details.php b/user_details.php
index b28300b8..a8f60fa5 100644
--- a/user_details.php
+++ b/user_details.php
@@ -56,7 +56,7 @@ require_once "includes/inc_all_user.php";
                         </div>
                     </div>
                     
-                    <button type="submit" name="edit_your_user_details" class="btn btn-primary"><i class="fas fa-check mr-2"></i>Save</button>
+                    <button type="submit" name="edit_your_user_details" class="btn btn-primary btn-responsive"><i class="fas fa-check mr-2"></i>Save</button>
 
                 </div>
             </div>