ChatGPTNextWeb/NextChat

[Bug] RTL character causes sidebar dragging issue.

Open

#3975 opened on Feb 2, 2024

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (87,992 stars) (59,717 forks)batch import
help wanted

Description

Describe the bug When an RTL character is set up, the drag icon is still on the right side of the sidebar. Also, when dragging, the elements is changing on the wrong way.

Expected behavior The dragging icon should be on the left side of sidebar and when dragging, the moving direction of width should be same with mouse moving.

Screenshots image

Deployment

  • Docker
  • Vercel
  • Server

Desktop (please complete the following information):

  • OS: [Windows 10]
  • Browser [chrome]
  • Version [2.10.1]

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Understanding of RTL CSSExperience with React drag handlersBasic JavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the sidebar component's drag implementation. Look for the drag handle element and check its positioning in CSS when the app is in RTL mode. Verify if there is a direction aware layout condition. Consider using CSS logical properties (e.g., inset inline start) to handle RTL automatically. Examine existing drag events to ensure width change direction matches mouse movement in RTL. The issue has no maintainer feedback yet, so propose a fix and open a PR for review.