UI chnage mobile view and desktop view apllyign css

static/css/mat_credit.css

@@ -8,9 +8,18 @@
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
 }
 
+/* ===== TABLE WRAPPER (FOR SCROLL) ===== */
+.table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
 /* ===== TABLE ===== */
 #matTable {
     width: 100%;
+    min-width: 900px;
+    /* IMPORTANT for horizontal scroll */
     border-collapse: collapse;
     font-size: 14px;
     text-align: center;
@@ -42,7 +51,7 @@
 /* ===== INPUT FIELDS ===== */
 #matTable input {
     width: 100%;
-    padding: 6px 6px;
+    padding: 6px;
     border: 1px solid #cfd8dc;
     border-radius: 4px;
     font-size: 13px;
@@ -50,12 +59,6 @@
     box-sizing: border-box;
 }
 
-/* TEXT INPUT (Unutilized) */
-#matTable input[type="text"] {
-    text-align: center;
-}
-
-/* INPUT FOCUS */
 #matTable input:focus {
     border-color: #0d6efd;
     box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
@@ -71,76 +74,51 @@
     border-radius: 4px;
     cursor: pointer;
     font-size: 13px;
-    transition: 0.2s;
 }
 
 #matTable button:hover {
     background-color: #157347;
 }
 
-/* ===== SAVE ALL BUTTON ===== */
-button[onclick="saveAll()"] {
-    display: block;
-    width: 300px;
-    margin: 25px auto 0;
-    background-color: #28a745;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    padding: 12px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-button[onclick="saveAll()"]:hover {
-    background-color: #218838;
-}
-
-/* ===== ROW HOVER ===== */
+/* ===== ROW STATES ===== */
 #matTable tbody tr:hover {
     background-color: #f1f6ff;
 }
 
-/* ===== ERROR HIGHLIGHT ===== */
 .input-error {
     border-color: #dc3545 !important;
     background-color: #fff5f5;
 }
 
-/* ===== SUCCESS HIGHLIGHT ===== */
 .row-saved {
     background-color: #e9f7ef !important;
 }
 
-/* ===== RESPONSIVE ===== */
+/* ===== MOBILE RESPONSIVE (TABLE FORMAT + INTERNAL SCROLL) ===== */
 @media (max-width: 768px) {
+
+    .container {
+        margin: 10px;
+        padding: 15px;
+    }
+
+    .table-wrapper {
+        overflow-x: auto;
+        border-radius: 8px;
+    }
+
     #matTable {
         font-size: 12px;
+        min-width: 800px;
+        /* keeps table structure */
+    }
+
+    #matTable input {
+        font-size: 12px;
     }
 
-    #matTable thead {
-        display: none;
-    }
-
-    #matTable tbody tr {
-        display: block;
-        margin-bottom: 15px;
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        padding: 10px;
-    }
-
-    #matTable tbody td {
-        display: flex;
-        justify-content: space-between;
-        padding: 6px 8px;
-        border: none;
-    }
-
-    #matTable tbody td::before {
-        content: attr(data-label);
-        font-weight: 600;
-        color: #0d6efd;
+    #matTable button {
+        font-size: 12px;
+        padding: 5px 10px;
     }
 }