Improve UISDK css for mobile

files/fido2-ui-sdk.css

@@ -16,6 +16,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 }
 
 .fido2-sdk-logo {
@@ -86,33 +87,9 @@
   border-radius: 6px;
   background-color: #e7f1ff;
   border-left: 4px solid #0d6efd;
-}
+ }
 
-.fido2-sdk-standalone {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-  padding: 40px 20px;
-}
-
-.fido2-sdk-standalone .container {
-  max-width: 1000px;
-}
-
-.fido2-sdk-standalone .card {
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  border: none;
-}
-
-.fido2-sdk-standalone .card-header {
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-  border-bottom: 2px solid #dee2e6;
-}
-
-.fido2-sdk-standalone .card-body {
-  background-color: #ffffff;
-}
-
-.fido2-sdk-table .text-danger {
+ .fido2-sdk-table .text-danger {
   color: #dc3545 !important;
   text-decoration: none;
   transition: all 0.2s ease;
@@ -134,15 +111,11 @@
 
 @media (max-width: 768px) {
   .fido2-sdk-modal .modal-dialog {
-    margin: 10px;
-    max-width: calc(100% - 20px);
-  }
+     margin: 10px;
+     max-width: calc(100% - 20px);
+   }
 
-  .fido2-sdk-standalone {
-    padding: 20px 10px;
-  }
-
-  .fido2-sdk-table th,
+   .fido2-sdk-table th,
   .fido2-sdk-table td {
     padding: 8px 12px;
     font-size: 14px;
@@ -156,6 +129,25 @@
   .fido2-sdk-logo {
     max-height: 30px;
   }
+
+  .fido2-sdk-status-badge {
+    width: 100%;
+    order: 3;
+    margin-top: 8px;
+  }
+
+  .fido2-sdk-header .btn-close {
+    order: 2;
+    margin-left: auto;
+  }
+
+  .fido2-sdk-header .modal-title {
+    order: 1;
+  }
+
+  .fido2-sdk-header .fido2-sdk-logo {
+    order: 0;
+  }
 }
 
 .fido2-sdk-loading {