[Bug]:

[krishhh16]

What happened?

I was trying to set up the project locally, when I did, I saw a lot of overflow and scroll wheel in the Microsoft edge browser and Brave browser, which is not good in UI/UX terms

The bug remains in the production app as well

I would love to work on the front end and fix it

Relevant log output

No response

Twitter / LinkedIn details

No response

[dosubot]

Hey @krishhh16! Great to see you diving into another challenge with Quivr 🚀😊

Thank you for your interest in contributing to the Quivr project. Your willingness to help improve the UI/UX is greatly appreciated. Here's how you can contribute to the front-end development of Quivr to fix the overflow and unnecessary scroll wheel usage issue:

1. Fork and Clone the Repository: Start by forking the Quivr repository to your GitHub account and then clone it to your local machine. This will allow you to make changes without affecting the original codebase.

2. Create a New Branch: Before making any changes, create a new branch in your local repository. This branch will be dedicated to the fixes you intend to apply. Naming it something descriptive like fix-ui-overflow-issue can be helpful.

3. Analyze the Issue: Open the project in your preferred code editor and navigate to the frontend/globals.css file. Since the issue is related to UI/UX overflow and unnecessary scroll wheel usage, focus on the CSS rules that might be causing these issues. The provided CSS code shows customization of the scrollbar, but the overflow issue might be related to other CSS properties not included in the snippet, such as overflow, width, height, or specific Tailwind CSS classes that affect layout and spacing.

4. Apply Fixes: Based on your analysis, you might need to adjust the CSS to prevent overflow and unnecessary scrolling. This could involve:

   • Ensuring that containers (like main or section) have appropriate max-width or max-height properties and are using overflow properties correctly (overflow-auto, overflow-hidden, etc.).
   • Reviewing and possibly overriding Tailwind CSS utility classes that might be contributing to the overflow issue.
   • Testing changes in both Microsoft Edge and Brave browsers to ensure that the UI/UX issues are resolved.

5. Test Your Changes: After applying your fixes, test the application thoroughly in both browsers where the issue was observed. Pay special attention to the main interface and vertical navigation bar to ensure that the overflow and scroll wheel issues are resolved.

6. Commit and Push Your Changes: Once you're satisfied with the fixes, commit your changes with a descriptive message and push them to your forked repository on GitHub.

7. Open a Pull Request: Navigate to the original Quivr repository on GitHub and open a new pull request. Target the main development branch of the Quivr repository and provide a detailed description of the changes you've made, including how they address the UI/UX issues. Be sure to mention that your changes have been tested in both Microsoft Edge and Brave browsers.

8. Collaborate and Revise: Be prepared to collaborate with the Quivr project maintainers. They might request changes or additional information before your pull request can be merged. Be responsive to feedback and make any necessary revisions to your proposed fixes.

Regarding the structure of the Quivr front-end codebase, I wasn't able to find specific information within the repository. However, the technology stack used in the front-end development of the Quivr application includes React (JSX is used for UI components) and Next.js (importing Link from "next/link" indicates routing provided by Next.js).

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

Sources

• frontend/globals.css
• frontend/app/not-found.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.