[Bug]:
krishhh16 opened this issue Β· comments
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
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:
-
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.
-
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. -
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 asoverflow
,width
,height
, or specific Tailwind CSS classes that affect layout and spacing. -
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
orsection
) have appropriatemax-width
ormax-height
properties and are usingoverflow
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.
- Ensuring that containers (like
-
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.
-
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.
-
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.
-
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
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.