Skip to content

Conversation

@mrubens
Copy link
Collaborator

@mrubens mrubens commented Jul 10, 2025

<!--
Thank you for contributing to Roo Code!

Before submitting your PR, please ensure:
- It's linked to an approved GitHub Issue.
- You've reviewed our [Contributing Guidelines](../CONTRIBUTING.md).
-->

### Related GitHub Issue

<!-- Every PR MUST be linked to an approved issue. -->

Closes: # <!-- Replace with the issue number, e.g., Closes: #123 -->

### Roo Code Task Context (Optional)

<!--
If you used Roo Code to help create this PR, you can share public task links here.
This helps reviewers understand your development process and provides additional context.
Example: https://app.roocode.com/share/task-id
-->
https://app.roocode.com/share/task-id-will-go-here

### Description

This PR addresses the responsive layout issues on the share page by improving the adaptability of both the share options popover and the "Connect to Cloud" modal.

Key changes include:

*   **Share Popover (`PopoverContent`)**:
    *   Adjusted width to be responsive (`w-64 sm:w-72 md:w-80`).
    *   Improved content layout with `flex-shrink-0` for icons, `items-start` for better alignment, `min-w-0 flex-1` for text containers, and `break-words` for proper text wrapping.
    *   Refined spacing and typography for better readability across screen sizes.
*   **Connect to Cloud Modal (`DialogContent`)**:
    *   Implemented responsive sizing (`max-w-sm sm:max-w-md`, `w-[calc(100vw-2rem)]`, `mx-4`) to prevent overflow and adapt to various viewports.
    *   Updated typography with responsive text sizes (`text-sm sm:text-base`, `text-lg sm:text-xl`) and improved line heights.
    *   Standardized spacing using `gap-3`, `space-y-3`, and `space-y-4` for consistent vertical rhythm.
    *   Adjusted button heights for better touch targets on mobile (`h-10 sm:h-11`).

These changes ensure the share functionality maintains a consistent and user-friendly experience across all device sizes.

### Test Procedure

To test these changes:

1.  Navigate to a page with the "Share" button (e.g., a chat task page).
2.  Click the "Share" button to open the popover.
3.  If not connected to the cloud, click the "Connect to Cloud" option to open the modal.
4.  **Verify Responsiveness**:
    *   Resize your browser window from very narrow (mobile) to wide (desktop) and observe both the popover and the modal.
    *   Ensure content (text, icons, buttons) wraps correctly, remains aligned, and does not overflow its container.
    *   Check that spacing and text sizes adjust appropriately for different screen widths.
    *   Confirm that the "Connect to Cloud" modal does not exceed the viewport width on small screens.

### Pre-Submission Checklist

<!-- Go through this checklist before marking your PR as ready for review. -->

- [ ] **Issue Linked**: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
- [ ] **Scope**: My changes are focused on the linked issue (one major feature/fix per PR).
- [ ] **Self-Review**: I have performed a thorough self-review of my code.
- [ ] **Testing**: New and/or updated tests have been added to cover my changes (if applicable).
- [ ] **Documentation Impact**: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
- [ ] **Contribution Guidelines**: I have read and agree to the [Contributor Guidelines](/CONTRIBUTING.md).

### Screenshots / Videos

<!--
For UI changes, please provide before-and-after screenshots or a short video of the *actual results*.
This greatly helps in understanding the visual impact of your changes.
-->
Please provide screenshots/videos demonstrating the responsive behavior of the share popover and connect modal across different screen sizes.

### Documentation Updates

<!--
Does this PR necessitate updates to user-facing documentation?
- [ ] No documentation updates are required.
- [ ] Yes, documentation updates are required. (Please describe what needs to be updated or link to a PR in the docs repository).
-->
- [x] No documentation updates are required.

### Additional Notes

<!-- Add any other context, questions, or information for reviewers here. -->

### Get in Touch

<!--
Please provide your Discord username for reviewers or maintainers to reach you if they have questions about your PR
-->
YourDiscordUsername

---

[Slack Thread](https://roo-code.slack.com/archives/D0923B8VDMH/p1752159126228739?thread_ts=1752159126.228739&cid=D0923B8VDMH)
<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Improves responsive layout of share popover and connect modal in `ShareButton.tsx` for better adaptability across screen sizes.
> 
>   - **Responsive Design**:
>     - `PopoverContent` width adjusted to `w-64 sm:w-72 md:w-80` for responsiveness.
>     - `DialogContent` in connect modal set to `max-w-sm sm:max-w-md`, `w-[calc(100vw-2rem)]`, `mx-4` to prevent overflow.
>   - **Layout Improvements**:
>     - Added `flex-shrink-0`, `items-start`, `min-w-0 flex-1`, and `break-words` to improve layout and text wrapping in `ShareButton`.
>     - Standardized spacing with `gap-3`, `space-y-3`, and `space-y-4` in `DialogContent`.
>     - Adjusted button heights to `h-10 sm:h-11` for better mobile touch targets.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=RooCodeInc%2FRoo-Code&utm_source=github&utm_medium=referral)<sup> for ca0110ae9236c7701c1cba03041e73abc558a74c. You can [customize](https://app.ellipsis.dev/RooCodeInc/settings/summaries) this summary. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

@mrubens mrubens requested review from cte and jr as code owners July 10, 2025 14:57
@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. UI/UX UI/UX related or focused labels Jul 10, 2025
@delve-auditor
Copy link

delve-auditor bot commented Jul 10, 2025

No security or compliance issues detected. Reviewed everything up to ca0110a.

Security Overview
  • 🔎 Scanned files: 1 changed file(s)
Detected Code Changes
Change Type Relevant files
Enhancement ► ShareButton.tsx
    Improve UI layout and responsiveness
    Update spacing and text styles
    Enhance mobile and desktop viewport adaptability

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

@mrubens mrubens closed this Jul 10, 2025
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Jul 10, 2025
@github-project-automation github-project-automation bot moved this from Triage to Done in Roo Code Roadmap Jul 10, 2025
@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jul 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. size:M This PR changes 30-99 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

4 participants