Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement responsive full-width adjustment for chat bubbles and prompt field when resizing window #39

Closed
6 tasks done
itsmartashub opened this issue Jul 14, 2024 · 0 comments · Fixed by #35
Closed
6 tasks done

Implement responsive full-width adjustment for chat bubbles and prompt field when resizing window #39

itsmartashub opened this issue Jul 14, 2024 · 0 comments · Fixed by #35
Assignees
@itsmartashub
Labels
Status: Already Implemented A proposal which has already been implemented before

Comments

@itsmartashub
Copy link
Owner

itsmartashub commented Jul 14, 2024 •
edited
Loading

  • Only add the event listener for resizing if the user has made changes to the chat width options. If the user hasn't touched any custom options or full-width settings, the resizing event should not be triggered
  • Detect when the screen size is <= 768px
  • When the screen size meets this condition, apply a style that sets the chat bubbles and prompt textarea to full width.
  • Ensure that the full-width adjustment is applied smoothly during resizing, providing a seamless user experience.
  • ❗When the screen size is greater than 768px and the interface is being resized, remove the full-width adjustment and reset to the default or previously chosen width options. So first, I have to detect if the user change the default preferences.
  • Use debounce to prevent unnecessary resizing events and ensure smooth adjustments.
@itsmartashub itsmartashub added the Status: WIP Work In Progress label Jul 14, 2024
@itsmartashub itsmartashub self-assigned this Jul 14, 2024
@itsmartashub itsmartashub changed the title Implement responsive full-width adjustment for chat bubbles and prompt textarea when resizing window Implement responsive full-width adjustment for chat bubbles and prompt field when resizing window Jul 14, 2024
@itsmartashub itsmartashub mentioned this issue Jul 14, 2024
Merged
22 tasks
@itsmartashub itsmartashub linked a pull request Jul 14, 2024 that will close this issue
Implement full and custom width conversation view options #35
Merged
22 tasks
itsmartashub added a commit that referenced this issue Jul 14, 2024
@itsmartashub
feat(chat-custom-width/window-resizing): Responsive width adjustment (#…
6e89b63 
…39)

- Implement a new resizing function to make chat bubbles and the prompt textarea full width on smaller screens (breakpoint < 768px)
- Reset to default or previously chosen width options on larger screens
- Note: The responsive width adjustment is not saved, so on page refresh, the options won't remain full width

Changes summary:
- Added a responsive width adjustment feature:
  - On smaller screens (breakpoint < 768px), chat bubbles and the prompt textarea are automatically set to full width for improved mobile experience.
  - On larger screens, the width settings reset to default or previously chosen options, ensuring a balanced layout for desktop users.
  - Note: The responsive width adjustment is not saved, so on page refresh, the options won't remain full width.
@itsmartashub itsmartashub added Status: Already Implemented A proposal which has already been implemented before and removed Status: WIP Work In Progress labels Jul 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@itsmartashub itsmartashub

Labels
Status: Already Implemented A proposal which has already been implemented before
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Implement full and custom width conversation view options itsmartashub/GPThemes
1 participant
@itsmartashub