Update templates/reward_status.html

templates/reward_status.html

@@ -30,23 +30,22 @@
         }
         .reward-status {
             display: flex;
-            justify-content: space-between;
+            justify-content: flex-start;
             flex-wrap: wrap;
+            gap: 20px; /* Adjust spacing between items */
             background-color: #fff;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            height: auto;
-            max-height: 800px;
-            overflow: hidden;
         }
         .item-section {
             width: 100%; /* Default to 100% width on small screens */
-            height: auto;
+            height: auto; /* Ensure dynamic height */
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             padding: 10px;
+            flex-grow: 1; /* Allow the container to grow as needed */
         }
         @media (min-width: 768px) {
             .item-section {
@@ -93,14 +92,14 @@
         .modal {
             display: none;
             position: fixed;
-            z-index: 1;
+            z-index: 1000;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
             overflow: auto;
-            padding-top: 60px;
+            padding-top: 60px; /* Allow for more content to be shown */
         }
         .modal-content {
             background-color: #fff;