full page of response fields results in last response behind input field

[dlarue]

The floating input field can end up covering up the last response once a page is full and it starts scrolling.

Chrome(Version 110.0.5481.100 (Official Build) (64-bit) ) on Linux Kubuntu.

[jas3333]

My CSS skills are horrible, but I think I may have fixed it. Could you try the latest update?

[dlarue]

It still seems to be doing it. I tried in a new tab and I tried an incognito window in hopes it wouldn't be caching anything.

[dlarue]

It doesn't seem to be covering up any text at this point, just slightly overlapping the response box so good enough unless you feel the need to prevent further scrolling of the response window.

BTW, I just noticed the history popup. Nice added feature. Often I will reenter and modify a request to try and get a better response so not going back and copy/pasting is helpful.

[jas3333]

What size screen are you using? Was hoping that was the issue. I tried to target 1080p with an @media in the CSS to resize the chatbox area.

[dlarue]

1,440 x 900 Pixels (381 x 238 mm)

[jas3333]

Ah ok, that is why it didn't work very well. I've added an additional @media to adjust for 900p screens. It should work now. I hope, let me know if you're still having issues.

[dlarue]

It still does the chat input window overlap but now it clips all previous display data to just a pinch more than one screen size. ie the V scrollbar is active but there's always only a little bit to scroll no matter how many or how large the chat sessions are.

[jas3333]

I've been trying to replicate the behavior but can't seem to. I've tried two different browsers one chrome based and other Firefox based. Both set to emulate 1440x900.

[dlarue]

hmm, I just ran through Firefox and get the same results both windowed and full screen. I will delete, re-clone and rerun and see if there are any changes. I've been doing git pull, npm install on every change you've made. I'll be back...

OK, back and it operates the same here with the overlapping chat field and I did figure out the scrolling problem. Seems if I click into the area of the responses then I can scroll back in history further and a very narrow scroll bar does show(only in Firefox, not in Chrome) up. But the actual browser window has a scroll bar which is showing just a little bit more than the full window and using that scroll bar only goes back a very little bit.

I just put both browsers into fullscreen mode(F11) and the overlapping chat field goes away. So this is likely associated with the browser scrollbar activation as opposed to the inner frame scrolling operation.

[jas3333]

hmm, I just ran through Firefox and get the same results both windowed and full screen. I will delete, re-clone and rerun and see if there are any changes. I've been doing git pull, npm install on every change you've made. I'll be back...

OK, back and it operates the same here with the overlapping chat field and I did figure out the scrolling problem. Seems if I click into the area of the responses then I can scroll back in history further and a very narrow scroll bar does show(only in Firefox, not in Chrome) up. But the actual browser window has a scroll bar which is showing just a little bit more than the full window and using that scroll bar only goes back a very little bit.

I just put both browsers into fullscreen mode(F11) and the overlapping chat field goes away. So this is likely associated with the browser scrollbar activation as opposed to the inner frame scrolling operation.

Ok sounds like the chatbox just isn't fitting to the screen. I adjusted it to be a little bit smaller. I'm afraid to go too small as there won't be much room to see the chats. I could adjust the font size if needed.

Something you could try if it doesn't work and you don't want to wait for me to get back to you is to adjust it in the CSS file located in client/src/index.css. Down at the bottom you will see:

@media (max-height: 1000px) {
    .chatbox {
        height: 780px; 
    }
    .settings-modal {
        top: 72%;
    }
}

You can adjust the height down further, and if the chats are taking up too much space you could try adding: font-size: 14px; or whatever size works best.

Then in the client folder you can run: npm run build to rebuild the react app then hit refresh in the browser. Hopefully the small adjustment works, I'll be a bit busy here soon so I might not be able to respond as quickly, but I'll try to keep checking back.

[dlarue]

This is what I came up with for the @media settings based on the browser display area being different sizes: fullscreen(900px) windowed(800px) with no bookmark toolbar windowed(750px) with bookmark toolbar. These seem to work reasonably well on both Firefox and Chrome.

@media (max-height: 1190px) {^M .chatbox {^M height: 850px;^M }^M .settings-modal {^M top: 75%;^M }^M }^M ^M @media (max-height: 1000px) {^M .chatbox {^M height: 900px;^M }^M .settings-modal {^M top: 72%;^M }^M }^M

@media (max-height: 900px) { .chatbox { height: 850px; } .settings-modal { top: 62%; } }

@media (max-height: 800px) { .chatbox { height: 700px; } .settings-modal { top: 62%; } }

@media (max-height: 750px) { .chatbox { height: 670px; } .settings-modal { top: 62%; } }

[jas3333]

Alright went ahead and put those in the CSS and tested a bit, seems to be ok. Thanks, went ahead and pushed the update.