fix mobile css

my-blog/static/css/style.css

@@ -363,6 +363,7 @@ article.article-content {
 .article-actions {
     display: flex;
     gap: 12px;
+    padding: 15px 0;
 }
 
 .action-btn {
@@ -796,7 +797,7 @@ article.article-content {
 
 @media (max-width: 1000px) {
     .main-header {
-        padding: 12px 0;
+        padding: 0px;
     }
     
     .header-content {
@@ -806,6 +807,41 @@ article.article-content {
         gap: 0;
     }
     
+    /* OAuth app mobile fixes */
+    .comment-item {
+        padding: 0px !important;
+        margin: 0px !important;
+    }
+    
+    .auth-section {
+        padding: 0px !important;
+    }
+    
+    .comments-list {
+        padding: 0px !important;
+    }
+    
+    .comment-section {
+        padding: 0px !important;
+        margin: 0px !important;
+    }
+    
+    .comment-content {
+        padding: 10px !important;
+        word-wrap: break-word !important;
+        overflow-wrap: break-word !important;
+    }
+    
+    .comment-header {
+        padding: 10px !important;
+    }
+    
+    /* Fix comment-meta URI overflow */
+    .comment-meta {
+        word-break: break-all !important;
+        overflow-wrap: break-word !important;
+    }
+    
     /* Hide site title text on mobile */
     .site-title {
         display: none;
@@ -896,11 +932,11 @@ article.article-content {
         padding: 16px;
     }
     
-    .article-title {
-        font-size: 24px;
-    }
-    
-    
+				.article-title {
+					   font-size: 24px;
+					   padding: 30px 0px;
+				}
+
     .message-header .avatar {
         width: 32px;
         height: 32px;
@@ -917,4 +953,4 @@ article.article-content {
         width: 100%;
         padding: 0;
     }
-}
+}

my-blog/templates/oauth-assets.html

@@ -1,3 +1,3 @@
 <!-- OAuth Comment System - Load globally for session management -->
-<script type="module" crossorigin src="/assets/comment-atproto-BuIwSgQs.js"></script>
-<link rel="stylesheet" crossorigin href="/assets/comment-atproto-CPKYAM8U.css">
+<script type="module" crossorigin src="/assets/comment-atproto-kBwioMcR.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-FS0uZjXB.css">

oauth/src/App.css

@@ -171,6 +171,56 @@
   .app .app-main {
     padding: 0px !important;
   }
+  
+  .comment-item {
+    padding: 0px !important;
+    margin: 0px !important;
+  }
+  
+  .auth-section {
+    padding: 0px !important;
+  }
+  
+  .comments-list {
+    padding: 0px !important;
+  }
+  
+  .comment-section {
+    padding: 0px !important;
+    margin: 0px !important;
+  }
+  
+  .comment-content {
+    padding: 10px !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+  }
+  
+  .comment-header {
+    padding: 10px !important;
+  }
+  
+  /* Fix overflow on article pages */
+  article.article-content {
+    overflow-x: hidden !important;
+  }
+  
+  /* Ensure full width on mobile */
+  .app {
+    max-width: 100vw !important;
+  }
+  
+  /* Fix button overflow */
+  button {
+    max-width: 100%;
+    white-space: normal;
+  }
+  
+  /* Fix comment-meta URI overflow */
+  .comment-meta {
+    word-break: break-all !important;
+    overflow-wrap: break-word !important;
+  }
 }
 
 .gacha-section {

oauth/src/App.tsx

@@ -1048,9 +1048,6 @@ function App() {
           {/* Comments List */}
           {activeTab === 'comments' && (
             <div className="comments-list">
-              <div className="comments-header">
-                <h3>Comments</h3>
-              </div>
             {comments.filter(shouldShowComment).length === 0 ? (
               <p className="no-comments">
                 {appConfig.rkey ? `No comments for this post yet` : `No comments yet`}