fix
This commit is contained in:
@@ -52,6 +52,11 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* When no user profile, center the actions */
|
||||
.oauth-header-content:has(.oauth-header-actions-full) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.oauth-app-title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
@@ -62,10 +67,15 @@ body {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.oauth-header-actions-full {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* OAuth User Profile in Header */
|
||||
.oauth-user-profile {
|
||||
display: flex;
|
||||
@@ -674,53 +684,35 @@ body {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
max-width: 100%;
|
||||
/* Responsive Mobile CSS - Following oauth_old and my-blog patterns */
|
||||
@media (max-width: 1000px) {
|
||||
/* Base mobile styles to prevent overflow */
|
||||
* {
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
/* OAuth app header mobile fixes */
|
||||
.oauth-app-header {
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
.oauth-header-content {
|
||||
max-width: 100% !important;
|
||||
padding: 10px 20px !important;
|
||||
margin: 0px !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* OAuth User Profile Mobile */
|
||||
/* User profile mobile adjustments */
|
||||
.oauth-user-profile {
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-avatar-section .profile-avatar,
|
||||
@@ -742,15 +734,187 @@ body {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.oauth-header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
.oauth-header-actions {
|
||||
width: auto !important;
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.oauth-header-actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
.oauth-header-actions-full {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Main content mobile optimization */
|
||||
.main-content {
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
/* Card and container mobile styles */
|
||||
.card {
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
/* Record items mobile */
|
||||
.record-item {
|
||||
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 elements mobile */
|
||||
.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 mobile */
|
||||
.auth-section {
|
||||
padding: 0px !important;
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.auth-section.search-bar-layout {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex-direction: row !important;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.auth-section.search-bar-layout .handle-input {
|
||||
max-width: calc(100% - 80px) !important;
|
||||
width: calc(100% - 80px) !important;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
white-space: nowrap !important;
|
||||
min-width: 70px !important;
|
||||
}
|
||||
|
||||
/* Tabs mobile */
|
||||
.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;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* JSON display mobile */
|
||||
.json-content {
|
||||
font-size: 10px !important;
|
||||
padding: 8px !important;
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
|
||||
/* Ask AI mobile */
|
||||
.ask-ai-container {
|
||||
margin: 0px !important;
|
||||
border-radius: 0px !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Buttons mobile */
|
||||
.btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
button {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Comment meta mobile - fix overflow */
|
||||
.comment-meta {
|
||||
word-break: break-all !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
/* Message content mobile */
|
||||
.message-content {
|
||||
word-wrap: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -152,42 +152,53 @@ export default function App() {
|
||||
<div className="app">
|
||||
<header className="oauth-app-header">
|
||||
<div className="oauth-header-content">
|
||||
{user && (
|
||||
<div className="oauth-user-profile">
|
||||
<div className="profile-avatar-section">
|
||||
{user.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.displayName || user.handle}
|
||||
className="profile-avatar"
|
||||
/>
|
||||
) : (
|
||||
<div className="profile-avatar-fallback">
|
||||
{(user.displayName || user.handle || '?').charAt(0).toUpperCase()}
|
||||
{user ? (
|
||||
<>
|
||||
<div className="oauth-user-profile">
|
||||
<div className="profile-avatar-section">
|
||||
{user.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.displayName || user.handle}
|
||||
className="profile-avatar"
|
||||
/>
|
||||
) : (
|
||||
<div className="profile-avatar-fallback">
|
||||
{(user.displayName || user.handle || '?').charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-info">
|
||||
<div className="profile-display-name">
|
||||
{user.displayName || user.handle}
|
||||
</div>
|
||||
<div className="profile-handle">
|
||||
@{user.handle}
|
||||
</div>
|
||||
<div className="profile-did">
|
||||
{user.did}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-info">
|
||||
<div className="profile-display-name">
|
||||
{user.displayName || user.handle}
|
||||
</div>
|
||||
<div className="profile-handle">
|
||||
@{user.handle}
|
||||
</div>
|
||||
<div className="profile-did">
|
||||
{user.did}
|
||||
</div>
|
||||
</div>
|
||||
<div className="oauth-header-actions">
|
||||
<AuthButton
|
||||
user={user}
|
||||
onLogin={login}
|
||||
onLogout={logout}
|
||||
loading={authLoading}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="oauth-header-actions oauth-header-actions-full">
|
||||
<AuthButton
|
||||
user={user}
|
||||
onLogin={login}
|
||||
onLogout={logout}
|
||||
loading={authLoading}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="oauth-header-actions">
|
||||
<AuthButton
|
||||
user={user}
|
||||
onLogin={login}
|
||||
onLogout={logout}
|
||||
loading={authLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user