🐛 Bug Report: UI Inconsistencies During Screen Resizing

[aidanbennettjones]

📜 Description

When the screen is resized to a certain width, the UI experiences several issues:

1. The navigation bar (or relevant bar) disappears, leaving components unstructured.

2. The "Share" button is no longer visible.

3. Due to the missing container, other UI components become free-floating, causing overlapping and an unattractive user experience.

👟 Reproduction steps

Steps to Reproduce:

1. Open the DocsGPT interface.

2. Create a chat and get response from model

3. Close the chat menu on left hand side of screen

4. Resize the window to a smaller width (specific breakpoints TBD).

5. Observe that the bar disappears.

6. Notice that the "Share" button is no longer present or is free flow.

7. Other UI elements overlap, disrupting usability.

👍 Expected behavior

• Relevant bar should remain present when chat menu is collapsed

• The "Share" button should stay accessible in all viewport sizes.

• Components should maintain a structured layout without overlapping.

👎 Actual Behavior with Screenshots

Example of Overlap:

Example of Bar Remaining Present:

Example of Share button being free flow:

💻 Operating system

MacOS

What browsers are you seeing the problem on?

Chrome

🤖 What development environment are you experiencing this bug on?

Docker

🔒 Did you set the correct environment variables in the right path? List the environment variable names (not values please!)

Yes.

📃 Provide any additional context for the Bug.

This issue impacts usability and responsiveness, making the app difficult to use on smaller screens. A fix should ensure proper layout adaptation through CSS media queries or a more flexible component structure.

📖 Relevant log output

N/A

👀 Have you spent some time to check if this bug has been raised before?

• [x] I checked and didn't find similar issue

🔗 Are you willing to submit PR?

Yes, I am willing to submit a PR!

🧑‍⚖️ Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[aidanbennettjones]

@dartpain I am having trouble locating the necessary codebase to make the change? Any suggestions?

[ailunc]

Hi @aidanbennettjones ! Can you try this:

1. Always Render the Top Bar with Share (Mobile & Desktop)

Locate this section near the bottom of your return block:

<div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">

Modify it to include key elements like the Share button and conditionally show them based on viewport:

<div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden flex justify-between items-center px-4">
  <div className="flex gap-4 items-center">
    <button
      className="h-6 w-6"
      onClick={() => setNavOpen(true)}
    >
      <img
        src={Hamburger}
        alt="Toggle mobile menu"
        className="w-7 filter dark:invert"
      />
    </button>
    <div className="text-[#949494] font-medium text-[20px]">DocsGPT</div>
  </div>
  <button
    className="bg-blue-500 text-white rounded px-3 py-1 text-sm"
    onClick={() => {
      // your share handler logic here
    }}
  >
    Share
  </button>
</div>

This ensures that even on mobile when sidebar is collapsed, the top bar with the Share button is visible.

2. Maintain Layout with Flex/Grid at Smaller Viewports

Ensure the main layout wrapping Navigation and the content area uses flex or grid. You can wrap it like so (in a parent layout component or App.tsx):

<div className="flex flex-col md:flex-row h-screen w-full">
  <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
  <main className="flex-1 overflow-auto">
    {/* Your main chat UI */}
  </main>
</div>

3. Fallback Button to Reopen Sidebar (already exists!)

This is already in your code:

{!navOpen && (
  <div className="absolute top-3 left-3 z-20 hidden transition-all md:block">

Add block instead of hidden for mobile if you want it accessible there too:

<div className="absolute top-3 left-3 z-20 block md:block">

[aidanbennettjones]

Thank you @ailunc !

Quick Question: For "2." when you say "Your main chat UI" I assume you mean "MainLayout()"? Please let me know if I misinterpreted.

[cschnydman]

Hello @dartpain ! I have been working with @aidanbennettjones on this issue, but we are struggling to find the codebase. Do you have any suggestions on where it would be? Thank you

[dartpain]

The frontend code is located here: https://github.com/arc53/DocsGPT/tree/main/frontend

Or what else do you mean by codebase? @cschnydman

The profile icon is not part of the OSS application

[aidanbennettjones]

Pull request #1763 Attempted change.