feat: Enhance transaction model and dashboard with Azure OAuth integration

data/static/css/styles.css

@@ -16,12 +16,13 @@ nav{
     z-index: 12;
 }
 nav .menu{
-    max-width: 1250px;
+    max-width: none;
+    width: 100%;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 20px;
+    padding: 0 clamp(8px, 1vw, 16px);
 }
 .menu .logo a{
     text-decoration: none;
@@ -73,6 +74,8 @@ body::before {
 main {
     flex: 1;
     padding-top: 70px; /* clear fixed nav */
+    padding-left: clamp(4px, 0.8vw, 12px);
+    padding-right: clamp(4px, 0.8vw, 12px);
     position: relative;
     z-index: 1;
 }
@@ -90,29 +93,34 @@ footer {
 
 /* ── Dashboard content container ────────────────────────── */
 .dashboard-container {
-    max-width: 1250px;
-    margin: 32px auto;
-    padding: 40px 24px 60px;
+    width: 100%;
+    margin: 8px 0;
+    padding: 14px clamp(10px, 1vw, 18px);
     background: rgba(15, 17, 23, 0.45);
     backdrop-filter: blur(6px);
     border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 86px);
 }
 .dashboard-container h1 {
     font-size: 28px;
     font-weight: 600;
     color: #f1f5f9;
-    margin-bottom: 24px;
-    padding-bottom: 12px;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
     border-bottom: 2px solid #2d2d3a;
     letter-spacing: 0.02em;
+    flex-shrink: 0;
 }
 
 /* ── Data table ─────────────────────────────────────────── */
 .table-scroll {
     overflow-x: auto;
     overflow-y: auto;
-    max-height: calc(100vh - 340px);
+    flex: 1;
     border-radius: 10px;
+    min-height: 0;
 }
 .table-scroll .data-table thead th {
     position: sticky;
@@ -181,11 +189,12 @@ footer {
     flex-wrap: wrap;
     align-items: flex-end;
     gap: 16px;
-    margin-bottom: 24px;
-    padding: 18px 20px;
+    margin-bottom: 8px;
+    padding: 12px 16px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid #2d2d3a;
     border-radius: 10px;
+    flex-shrink: 0;
 }
 .filter-group {
     display: flex;
@@ -263,5 +272,6 @@ footer {
     display: flex;
     gap: 10px;
     justify-content: flex-end;
-    margin-top: 20px;
+    margin-top: 8px;
+    flex-shrink: 0;
 }