Update table.html styling for mobile view

.github/workflows/stale_issues.yml

@@ -0,0 +1,17 @@
+name: 'Stale Issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          stale-pr-message: 'This PR is stale because it has been open 45 days with no activity.'
+          close-issue-message: 'This issue was closed because it has been stalled for 5 days with no activity.'
+          days-before-stale: 30
+          days-before-close: 5
+          days-before-pr-close: -1

apps/table.css

@@ -243,7 +243,7 @@ nav li:not(.active):hover {
 
 td {
   text-align: center; /* or left, right, justify, etc. */
-=======
+}
 
 .d-md-inline-flex{
   display: flex;
@@ -259,5 +259,34 @@ td {
   line-height: 1;
   font-size: 24px;
 
-}
+}/* Mobile View: Adjust layout for screens <= 500px */
+@media (max-width: 500px) {
+  .d-md-inline-flex {
+      display: flex; /* Flexbox for layout */
+      flex-wrap: wrap; /* Allow wrapping */
+      justify-content: auto; /* Center align all buttons */
+      gap: 10px; /* Add spacing between buttons */
+  }
 
+  .d-md-inline-flex > div {
+      flex: 1 1 calc(50% - 10px); /* Each child takes 50% of the row width minus spacing */
+      margin: 5px; /* Add spacing around items */
+      text-align: center; /* Center content within each item */
+  }
+
+  .btn-group {
+      display: flex; /* Ensure buttons in groups stay together */
+      flex-wrap: nowrap; /* Prevent wrapping within the group */
+      justify-content: center; /* Center align dropdown buttons */
+
+  }
+
+  .btn-group .btn {
+      flex: 1; /* Ensure equal width for buttons within the group */
+  }
+
+  .btn {
+      width: 100%; /* Buttons take full width of their container */
+      text-align: center; /* Center-align text within buttons */
+  }
+}

apps/table.html

@@ -139,7 +139,7 @@ <h1 class="h1">caMicroscope</h1>
                 <div class="pl-md-2 pt-2">
                     <button type="button" class="btn btn2 btn-success float-right w-md-100" style="padding: 7px; margin-right: 5px;"
                         onclick="(()=>{location.reload();return false;})()"> <i class="fas fa-sync-alt"></i>
-                        <span class="reload">Reload</span> </button>
+                        Reload </button>
                 </div>
                 <div>
 			    <div id="slideUploadButton" class="btn-group float-right pl-md-2 pt-2">
@@ -337,4 +337,4 @@ <h5 class="modal-title" id="slideNameChangeModalLabel">Slide name change confirm
 <script> insertFooterLayout();</script>
 </body>
 
-</html>
+</html>