[BUG]: Lack of Mobile Responsiveness in `Original Code` Box and `Refactor Code` Box

[harmeetsingh11]

Problem

The Original Code box and the Refactor Code box are currently not mobile responsive. When viewed on smaller screens, the layout does not adjust appropriately, leading to usability issues.

Description

The current layout of the Original Code box and the Refactor Code box does not adapt well to smaller screen sizes, making it difficult to view and interact with the content on mobile devices.

Steps to Reproduce

1. Open the application on a mobile device or use a responsive design testing tool.
2. Navigate to the Original Code box or the Refactor Code box.

Expected Behavior

The layout of the Original Code box and the Refactor Code box should adapt to smaller screen sizes, providing a user-friendly experience on mobile devices.

Actual Behavior

The Original Code box and the Refactor Code box do not adjust to smaller screens, causing usability issues on mobile devices.

Screenshots

Environment

• Browser: Chrome

Record

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I agree to follow this project's Code of Conduct
• [ ] I want to work on this issue

[Quaxguy]

Assign me please as I'm a contributor in codepeak

[harmeetsingh11]

@Quaxguy ,the issue has been assigned to you and you can start working on it :)

[Quaxguy]

i have a doubt i cant start the backend server though i have installed dependencies and the frontends working fine after adding my api key as a string the terminal throws this error could you please help me out

[Quaxguy]

i tried modifying tsconfig file but nothing works

[Quaxguy]

@harmeetsingh11 can u clarify the doubt for me please

[harmeetsingh11]

Try these solutions:

1. Try running these commands-

ts-node --esm index.ts 
Or 
ts-node-esm index.ts

2. Remove "type": "module" from package.json file

[Quaxguy]

well tried both of them not working for me

[harmeetsingh11]

@Quaxguy I'm not encountering this error. Avoid placing the API key in strings; use it as is. Please try this. The issue pertains to the frontend; no need to run the backend for now. We'll address this later.

[Albert-2]

hey @harmeetsingh11 I must say what a project man ssly loved it Appreciate 🙌 And I really like to be the part of it can you please assign me this issue THANK YOU FOR CONSIDERING..... :)

[harmeetsingh11]

@Quaxguy what's the progress? Are you working on this issue?

[Albert-2]

hey @harmeetsingh11 can you please assign it to me if no one is still working on it......

[harmeetsingh11]

@Albert-2 once I find out that no one is working on this issue, I will assign it to you.

[Albert-2]

okok

[Quaxguy]

@harmeetsingh11 I'm working on it I need half a day I'll send a pr tomorrow

[harmeetsingh11]

@Albert-2 , @Quaxguy is currently working on this issue, you can look for other issues in issues section or can create a new issue.

[harmeetsingh11]

@Quaxguy What's the update? It has been a considerable amount of time since the issue was assigned to you.

[Albert-2]

hey @harmeetsingh11 If you want then i would love to can contribute to this issue

[harmeetsingh11]

@Albert-2 the issue has been assigned to you and you can start working on it.

[Albert-2]

okok thank you

[Albert-2]

hey @harmeetsingh11 I have made changes just one doubt i have is in this PR too i don't need to include those three files

[Albert-2]

for desktop:

for mobile:

[harmeetsingh11]

@Albert-2 it looks good. Yes, you don't have to include package.json and package-lock.json files in commits, include only files in which changes have been made.

[Albert-2]

hey @harmeetsingh11 Kindly Review the PR Here it is https://github.com/harmeetsingh11/RefactorMate/pull/14 Thank You......