[PR #773] [MERGED] fix: fixed the recipients viewing issue on touch screens #1173

Closed
opened 2026-02-26 19:32:09 +03:00 by kerem · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/documenso/documenso/pull/773
Author: @ashrafchowdury
Created: 12/20/2023
Status: Merged
Merged: 3/8/2024
Merged by: @Mythie

Base: mainHead: update-documents-avatar


📝 Commits (10+)

📊 Changes

2 files changed (+108 additions, -67 deletions)

View changed files

📝 apps/web/src/app/(dashboard)/documents/data-table.tsx (+1 -3)
📝 apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx (+107 -64)

📄 Description

Description

This pull request addresses the issue where users on touchscreen devices couldn't properly see the Recipients list. I have implemented a two-easy solution to address this problem, offering a seamless user experience across device types:

  1. Popover for Touchscreen: For touchscreen devices, I have added a popover that displays the Recipients list when users tap on the avatars.

  2. Tooltip for Larger Screens: On larger screens (desktops and laptops), I have added a tooltip that appears when users hover over the avatars.

Changes

  1. Added Popover for smaller devices and keep the Tooltip for larger devices.
  2. Renamed the component stack-avatars-wtih-tooltip to stack-avatars-wtih-ui because now it contains both Tooltip and Popover.
  3. Used the useWindowSize hook to conditionally render the Tooltip and Popover
  4. To avoid repeating the same code, I've created a new component named stack-avatars-components.tsx to show the recipient's details. This component uses both Popover and Tooltip.

PR Preview

https://github.com/documenso/documenso/assets/87828904/2dc9b056-b4bd-43dd-b427-a0e803dee55a

Issue

Closes #756


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/documenso/documenso/pull/773 **Author:** [@ashrafchowdury](https://github.com/ashrafchowdury) **Created:** 12/20/2023 **Status:** ✅ Merged **Merged:** 3/8/2024 **Merged by:** [@Mythie](https://github.com/Mythie) **Base:** `main` ← **Head:** `update-documents-avatar` --- ### 📝 Commits (10+) - [`2a448fe`](https://github.com/documenso/documenso/commit/2a448fe06d29d4a98bbada9d4c373d3ade1c210e) fix: fixed the recipients viewing issue on touch screens - [`2bc5d15`](https://github.com/documenso/documenso/commit/2bc5d15af2c83bf27aa6c89bb1860f13fe3a8941) Merge branch 'main' into update-documents-avatar - [`cf5841a`](https://github.com/documenso/documenso/commit/cf5841a895d5be3e4060146deac8d7b1a8483478) Merge branch 'main' of https://github.com/ashrafchowdury/documenso into update-documents-avatar - [`ce67de9`](https://github.com/documenso/documenso/commit/ce67de9a1cb1ddb5db8092814c08de8f644fe65d) refactor: changed component name for better readability - [`8a8a551`](https://github.com/documenso/documenso/commit/8a8a5510cbc716b7b7398f0d930cb14eef02f36d) Merge branch 'main' into update-documents-avatar - [`3fb711c`](https://github.com/documenso/documenso/commit/3fb711cb4243f1ee65d072364e57d992627e053c) Merge branch 'update-documents-avatar' of https://github.com/ashrafchowdury/documenso into update-documents-avatar - [`8e75440`](https://github.com/documenso/documenso/commit/8e754405f85221b567b74ae3898ea59365f55f96) Merge branch 'main' into update-documents-avatar - [`1d4e78e`](https://github.com/documenso/documenso/commit/1d4e78e579f45a57719893e3f3da8e56cf7a9f89) Merge branch 'main' into update-documents-avatar - [`7b6d6fb`](https://github.com/documenso/documenso/commit/7b6d6fb1b9f39c645f75b98373c938ea57652a62) Merge branch 'main' into update-documents-avatar - [`32b0b1b`](https://github.com/documenso/documenso/commit/32b0b1bcdaee01cdee9b6ce1b494211263ae487f) fix: revert api change and use mouseenter/mouseleave ### 📊 Changes **2 files changed** (+108 additions, -67 deletions) <details> <summary>View changed files</summary> 📝 `apps/web/src/app/(dashboard)/documents/data-table.tsx` (+1 -3) 📝 `apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx` (+107 -64) </details> ### 📄 Description ## Description This pull request addresses the issue where users on touchscreen devices couldn't properly see the Recipients list. I have implemented a two-easy solution to address this problem, offering a seamless user experience across device types: 1. Popover for Touchscreen: For touchscreen devices, I have added a popover that displays the Recipients list when users tap on the avatars. 2. Tooltip for Larger Screens: On larger screens (desktops and laptops), I have added a tooltip that appears when users hover over the avatars. ## Changes 1. Added `Popover` for smaller devices and keep the `Tooltip` for larger devices. 2. Renamed the component `stack-avatars-wtih-tooltip` to `stack-avatars-wtih-ui` because now it contains both Tooltip and Popover. 3. Used the `useWindowSize` hook to conditionally render the `Tooltip` and `Popover` 4. To avoid repeating the same code, I've created a new component named `stack-avatars-components.tsx` to show the recipient's details. This component uses both Popover and Tooltip. ## PR Preview https://github.com/documenso/documenso/assets/87828904/2dc9b056-b4bd-43dd-b427-a0e803dee55a ## Issue Closes #756 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
kerem 2026-02-26 19:32:09 +03:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/documenso#1173
No description provided.