Skip to content

Responsive/Mobile: Fix hardcoded heights and add breakpoints #8

@samkeen

Description

@samkeen

Summary

Improve responsive design for better mobile/tablet experience.

Tasks

  • Remove hardcoded max-h-[600px] in session-tabs conversation view - should be responsive
  • Add mobile breakpoints to grid layouts:
    • Session detail 4-col grid needs sm: and md: breakpoints
    • Activity timeline 7-col grid is too wide on tablets
  • Fix table overflow on mobile (projects table)
  • Modals should use full width on small screens (max-w-full sm:max-w-md)
  • Activity timeline bar chart h-32 should adapt to mobile

Files to update

  • components/session-tabs.tsx (line ~65: max-h-[600px])
  • components/activity-timeline.tsx (grid and height issues)
  • app/page.tsx (table overflow)
  • components/settings-modal.tsx
  • components/project-config-modal.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions