-
Notifications
You must be signed in to change notification settings - Fork 145
better mobile #32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
better mobile #32
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
components/logs-pane.tsx
Outdated
className={`fixed bottom-0 right-0 z-10 bg-background ${isResizing || isSidebarResizing ? '' : 'transition-all duration-300 ease-in-out'}`} | ||
style={{ | ||
left: isSidebarOpen ? 'var(--sidebar-width)' : '0px', | ||
left: '0px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
left: '0px', | |
left: 'calc(var(--sidebar-width) * var(--sidebar-open))', |
The LogsPane is now always positioned with left: '0px'
, which causes it to be partially obscured by the sidebar on desktop when the sidebar is open.
View Details
Analysis
LogsPane overlaps with sidebar due to fixed left positioning
What fails: LogsPane
component (components/logs-pane.tsx:137) always uses left: '0px'
positioning, causing it to be partially covered by the sidebar (z-index 40) when the sidebar is open on desktop.
How to reproduce:
- Open the application on desktop (width >= 1024px)
- Open the sidebar (Cmd/Ctrl+B or click sidebar toggle)
- Navigate to a task with logs
- Observe the LogsPane at the bottom
Result: The left portion of the LogsPane (approximately 300px) is hidden behind the sidebar. The collapse/expand button and "Logs" label at px-3
are not visible or interactive.
Expected: LogsPane should start at the right edge of the sidebar when it's open (similar to how main content adjusts with marginLeft
in app-layout.tsx:361).
Root cause: Commit 07308e7 removed isSidebarOpen
from LogsPane's props and changed positioning from left: isSidebarOpen ? 'var(--sidebar-width)' : '0px'
to left: '0px'
.
Fix: Use CSS calc with existing CSS variables: left: 'calc(var(--sidebar-width) * var(--sidebar-open))'
which evaluates to 300px
when open (300 * 1) and 0px
when closed (300 * 0).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🔧 Build Fix:
Fixed TypeScript compilation errors: session.user
type mismatch in user.tsx
and array type assignment issue in task-form.tsx
.
📝 Patch Details
diff --git a/components/auth/user.tsx b/components/auth/user.tsx
index f952a71..387a71b 100644
--- a/components/auth/user.tsx
+++ b/components/auth/user.tsx
@@ -18,7 +18,7 @@ export function User(props: { user?: Session['user'] | null; authProvider?: Sess
// Only update from session after initialization is complete
useEffect(() => {
if (initialized) {
- setUser(session.user)
+ setUser(session.user ?? null)
setAuthProvider(session.authProvider ?? 'vercel')
}
}, [initialized, session.user, session.authProvider])
diff --git a/components/task-form.tsx b/components/task-form.tsx
index 6c6e4f2..18d6946 100644
--- a/components/task-form.tsx
+++ b/components/task-form.tsx
@@ -315,7 +315,7 @@ export function TaskForm({
// Check if user has required API keys for selected agent
const checkApiKeyRequirements = (): boolean => {
- let requirements = AGENT_API_KEY_REQUIREMENTS[selectedAgent as keyof typeof AGENT_API_KEY_REQUIREMENTS]
+ let requirements: readonly string[] = AGENT_API_KEY_REQUIREMENTS[selectedAgent as keyof typeof AGENT_API_KEY_REQUIREMENTS]
// For opencode, determine requirements based on selected model
if (selectedAgent === 'opencode') {
No description provided.