From 6cbfec4f82809831cb5769f097bd9c8e8c086b32 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Thu, 19 Jun 2025 18:41:20 +0900
Subject: [PATCH] mobile css

---
 oauth/src/App.css | 170 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 139 insertions(+), 31 deletions(-)

diff --git a/oauth/src/App.css b/oauth/src/App.css
index e056258..ee6ba45 100644
--- a/oauth/src/App.css
+++ b/oauth/src/App.css
@@ -683,79 +683,187 @@ 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;
-    border-right: none;
+    padding: 0px !important;
+    margin: 0px !important;
   }
   
   .card {
-    margin: 0;
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
+    margin: 0px !important;
+    border-radius: 0px !important;
+    border-left: none !important;
+    border-right: none !important;
+    max-width: 100% !important;
   }
   
-  .app-header {
-    padding: 8px 16px;
+  .card-content {
+    padding: 15px !important;
   }
   
-  .header-actions {
-    gap: 4px;
-  }
-  
-  .btn {
-    padding: 6px 12px;
-    font-size: 14px;
-  }
-  
-  .tab-btn {
-    padding: 12px 16px;
-    font-size: 14px;
+  .comment-form {
+    padding: 15px !important;
   }
   
   .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;
   }
   
-  /* OAuth User Profile Mobile */
+  .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 {
     gap: 8px;
   }
-  
+
   .profile-avatar-section .profile-avatar,
   .profile-avatar-fallback {
     width: 36px;
     height: 36px;
     font-size: 14px;
   }
-  
+
   .profile-display-name {
     font-size: 14px;
   }
-  
+
   .profile-handle {
     font-size: 12px;
   }
-  
+
   .profile-did {
     font-size: 9px;
   }
-  
+
   .oauth-header-content {
     flex-direction: column;
     gap: 12px;
     align-items: flex-start;
   }
-  
+
   .oauth-header-actions {
     width: 100%;
     justify-content: center;