From b3c1b01e9e437742dda38aec2d7dfe08330438a0 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Sat, 14 Jun 2025 22:20:19 +0900
Subject: [PATCH] fix mobile css
---
my-blog/static/css/style.css | 50 +++++++++++++++++++++++++----
my-blog/templates/oauth-assets.html | 4 +--
oauth/src/App.css | 50 +++++++++++++++++++++++++++++
oauth/src/App.tsx | 3 --
4 files changed, 95 insertions(+), 12 deletions(-)
diff --git a/my-blog/static/css/style.css b/my-blog/static/css/style.css
index 6cb092d..aee304c 100644
--- a/my-blog/static/css/style.css
+++ b/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;
}
-}
\ No newline at end of file
+}
diff --git a/my-blog/templates/oauth-assets.html b/my-blog/templates/oauth-assets.html
index a8143ee..d2454a6 100644
--- a/my-blog/templates/oauth-assets.html
+++ b/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">
\ No newline at end of file
+<script type="module" crossorigin src="/assets/comment-atproto-kBwioMcR.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-FS0uZjXB.css">
\ No newline at end of file
diff --git a/oauth/src/App.css b/oauth/src/App.css
index 60f5e3a..a20e199 100644
--- a/oauth/src/App.css
+++ b/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 {
diff --git a/oauth/src/App.tsx b/oauth/src/App.tsx
index 2ee17c7..1b55379 100644
--- a/oauth/src/App.tsx
+++ b/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`}