mobile css

oauth/src/App.css

@@ -683,50 +683,158 @@ body {
 }
 
 /* Responsive */
-@media (max-width: 768px) {
+@media (max-width: 1000px) {
   .main-content {
-    max-width: 100%;
+    padding: 0px !important;
+    margin: 0px !important;
+    max-width: 100% !important;
+  }
+  
+  /* OAuth app mobile fixes - prevent overflow and content issues */
+  .oauth-app-header {
+    padding: 0px !important;
+    margin: 0px !important;
+    border: none !important;
+  }
+  
+  .oauth-header-content {
+    max-width: 100% !important;
+    padding: 10px 20px !important;
+    margin: 0px !important;
+  }
+  
+  .oauth-header-actions {
+    width: auto !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
   }
   
   .content-area {
-    border-left: none;
+    padding: 0px !important;
-    border-right: none;
+    margin: 0px !important;
   }
   
   .card {
-    margin: 0;
+    margin: 0px !important;
-    border-radius: 0;
+    border-radius: 0px !important;
-    border-left: none;
+    border-left: none !important;
-    border-right: none;
+    border-right: none !important;
+    max-width: 100% !important;
   }
   
-  .app-header {
+  .card-content {
-    padding: 8px 16px;
+    padding: 15px !important;
   }
   
-  .header-actions {
+  .comment-form {
-    gap: 4px;
+    padding: 15px !important;
-  }
-  
-  .btn {
-    padding: 6px 12px;
-    font-size: 14px;
-  }
-  
-  .tab-btn {
-    padding: 12px 16px;
-    font-size: 14px;
   }
   
   .record-item {
-    padding: 12px 16px;
+    padding: 15px !important;
+    margin: 0px !important;
+    border-left: none !important;
+    border-right: none !important;
+  }
+  
+  .record-content {
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    max-width: 100% !important;
+  }
+  
+  .record-meta {
+    word-break: break-all !important;
+    overflow-wrap: break-word !important;
+    flex-wrap: wrap !important;
+  }
+  
+  .record-url {
+    word-break: break-all !important;
+    max-width: 100% !important;
+  }
+  
+  .form-group {
+    margin-bottom: 15px !important;
+  }
+  
+  .form-input, .form-textarea {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    padding: 12px !important;
+  }
+  
+  .auth-section {
+    padding: 0px !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
+  }
+  
+  .auth-section.search-bar-layout {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  
+  .auth-section.search-bar-layout .handle-input {
+    max-width: calc(100% - 80px) !important;
+    width: calc(100% - 80px) !important;
+  }
+  
+  .auth-button {
+    white-space: nowrap !important;
+    min-width: 70px !important;
+  }
+  
+  .tab-header {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+  
+  .tab-btn {
+    white-space: nowrap !important;
+    min-width: auto !important;
+    padding: 12px 16px !important;
+  }
+  
+  .json-content {
+    font-size: 10px !important;
+    padding: 8px !important;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+  
+  .ask-ai-container {
+    margin: 0px !important;
+    border-radius: 0px !important;
+    border-left: none !important;
+    border-right: none !important;
   }
   
   .chat-container {
-    height: 300px;
+    height: 250px !important;
+    padding: 12px !important;
+  }
+  
+  .question-form {
+    padding: 12px !important;
+  }
+  
+  .input-container {
+    flex-direction: column !important;
+    gap: 12px !important;
+  }
+  
+  .question-input {
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  
+  .send-btn {
+    width: 100% !important;
+    height: 44px !important;
   }
 
-  /* OAuth User Profile Mobile */
   .oauth-user-profile {
     gap: 8px;
   }