Bug: Responsive UI Issues on Mobile and Different Screen Sizes #106

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.