Bug: Responsive UI Issues on Mobile and Different Screen Sizes

[malys]

Summary

Claude Code Studio currently has several responsive UI issues that affect usability on both mobile devices and desktop screens with different resolutions.

The interface does not always adapt properly to the available space, causing navigation, project management, and task management to become difficult.

Current Issues

Mobile Devices

On phones and small screens:

• Project names are truncated excessively.
• Some dialogs exceed the viewport width.
• Important actions may be hidden or inaccessible.
• Kanban boards require excessive horizontal scrolling.
• Navigation becomes difficult when multiple panels are visible.

Desktop Screens

Depending on screen size and resolution:

• Long project names consume too much space.
• Too many options/buttons are displayed at the same time.
• Some panes become cramped while others remain underutilized.
• Layout feels optimized for only a limited range of screen sizes.

Examples

Long Project Names

Current:

My Very Long Project Name For Customer XYZ...

may break layouts or push useful information out of view.

Suggested:

My Very Long Project...

with:

• Tooltip on hover
• Expand on click
• Configurable column widths

Excessive Visible Actions

Current:

Edit  Delete  Delegate  Schedule  Chat  Settings  ...

Suggestions:

Edit  Delegate  ⋮ More

or responsive menus depending on screen size.

Expected Behavior

The UI should adapt dynamically to:

• Mobile devices
• Tablets
• Laptops
• Standard desktops
• Ultrawide monitors

Suggested Improvements

Responsive Layout

• Better mobile support
• Dynamic panel resizing
• Adaptive sidebars
• Collapsible sections

Project List Improvements

• Auto-truncate long names
• Tooltips
• Optional compact mode

Progressive Disclosure

Hide less frequently used actions behind:

⋮ More

menus.

User Preferences

Allow:

Compact Mode
Comfortable Mode
Dense Mode

for users managing large numbers of projects and tasks.

Areas To Review

• Home Dashboard
• Project List
• Kanban Board
• Schedule View
• Chat View
• Settings Screens
• Modal Dialogs
• Mobile Navigation

Impact

• Reduced usability on mobile.
• Poor experience on some desktop resolutions.
• Important information hidden by layout issues.
• Increased scrolling and navigation effort.

Priority

Medium-High

Use Case

As a user, I want Claude Code Studio to adapt correctly to different screen sizes so that projects, Kanban boards, chats, and schedules remain usable and readable on both mobile devices and desktop monitors.

[Lexus2016]

Thanks for the thorough audit! Given that Claude Code Studio explicitly lists mobile readiness in its README, your feedback on dialog boundaries, project name truncation, and action overflow is very valuable.

We have categorized this as an enhancement. We will address the immediate layout glitches first (safe dialog viewport capping via calc(100vw - 24px) and ellipsis for long project names), and schedule the progressive disclosure menus (⋮) and density modes for an upcoming UI iteration.

[Lexus2016]

Fixed in PR #112 and merged into main:

• Modal Dialog Viewport Limits: Added max-width: calc(100vw - 24px) for modal dialogs (including .dir-modal and .ssh-host-modal), and relaxed desktop-only minimum widths on mobile viewports.
• Kanban Mobile Layout: Improved Kanban layout for mobile and tablet screens, allowing action buttons to wrap gracefully and adapting dialogs to small viewports.
• Project Name Tooltips: Added title attributes displaying the full project name when names are truncated in dropdown selectors.
• Regression Tests: Added automated test coverage in test/responsive-ui.test.js.