luc-github / ESP3D-WEBUI

A Web UI for ESP8266 or ESP32 based boards connected to 3D printers / CNC
GNU General Public License v3.0
733 stars 304 forks source link

[BUG]Terminal overflow hidden doesn't work #395

Closed rondlh closed 5 days ago

rondlh commented 6 days ago

Just a tiny issue I noticed. In _control.scss I found the terminal sections:

.terminal {
    font-size: $font-size-sm;
    white-space: pre-wrap;
    word-break: break-all;
    border: 0.05rem solid #dadee4;
    border-radius: $border-radius;
    padding: 5px 5px !important;
    margin-top: 0px !important;
    overflow-x: hidden;
    overflow-y: scroll !important;
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;

    .echo {
        color: blue;
    }
    .error {
        color: red;
        font-weight: bolder;
    }
    pre {
        margin: 0px 5px;
        white-space: pre-wrap;
        word-break: break-all;
    }
}

"overflow-x: hidden;" should hide the horizontal overflow, but this does not seem to work together with "white-space: pre-wrap;", so the horizontal overflow is shown wrapped to the next line. If I delete "white-space: pre-wrap;" then things work like how I would expect it, then the overflow is not shown, resizing the window can make if visible if needed.

I tested this in Firefox and Chrome.

luc-github commented 6 days ago

do you have a screenshot of the issue ?

rondlh commented 6 days ago
Overflow
luc-github commented 6 days ago

it wrap on space so there is no overflow - what is the issue ? no x scrollbar - which is good

for me it is what I expected, what did you expected ?

rondlh commented 6 days ago

it wrap on space so there is no overflow - what is the issue ? no x scrollbar - which is good

for me it is what I expected, what did you expected ?

I expected: "overflow-x: hidden;"

luc-github commented 6 days ago

so not seeing overflow text? what is the benefit of not being able to see text?

rondlh commented 6 days ago

so not seeing overflow text? what is the benefit of not being able to see text?

Yes, parts of the text would be out of view, but can be brought into view if needed. The benefit is that I get a consistent log without broken lines "at random".

Currently I get this (2x "Q:7" wrapped to next line)

T:223.7/225 B:75.9/76 @:77 00:33/00:12 27% Z:1.00 E0:769.43 RX:0/87 Q:7
T:224.1/225 B:76.1/76 @:100 00:33/00:12 27% Z:1.00 E0:791.58 RX:0/87
Q:7
T:224.8/225 B:76.0/76 @:77 00:33/00:12 27% Z:1.00 E0:800.03 RX:0/87 Q:7
T:225.4/225 B:75.8/76 @:101 00:33/00:12 27% Z:1.00 E0:815.48 RX:0/87
Q:7

But I prefer this: (2 x "7" is hidden")

T:223.7/225 B:75.9/76 @:77 00:33/00:12 27% Z:1.00 E0:769.43 RX:0/87 Q:7
T:224.1/225 B:76.1/76 @:100 00:33/00:12 27% Z:1.00 E0:791.58 RX:0/87 Q:
T:224.8/225 B:76.0/76 @:77 00:33/00:12 27% Z:1.00 E0:800.03 RX:0/87 Q:7
T:225.4/225 B:75.8/76 @:101 00:33/00:12 27% Z:1.00 E0:815.48 RX:0/87 Q:

Perhaps I misunderstand the reason why you added "overflow-x: hidden;".

luc-github commented 6 days ago

Yes, parts of the text would be out of view, but can be brought into view if needed

how do you bring back the text?

rondlh commented 6 days ago

Yes, parts of the text would be out of view, but can be brought into view if needed

how do you bring back the text?

Making the window wider will reveal the text. And if the text is really too long then copy and paste it. Adding a horizontal scrollbar would also be a possible solution, it just tried it and it looks fine and works well.

Terminal Scroll
luc-github commented 6 days ago

I do not want to add horizontal scroll bar that is why.I use 'overflow-x: hidden' why don't you put terminal in full screen if you do not like wrapped line ?

rondlh commented 6 days ago

I do not want to add horizontal scroll bar that is why.I use 'overflow-x: hidden' why don't you put terminal in full screen if you do not like wrapped line ?

Because I like to use my screen to do other things at the same time. Full screen is really full screen, so nothing else. In my view it would be better to make this screen the full size of the browser screen, not the full screen. That would be a useful option for the terminal screen.

OK, I understand, you use "hidden" just to hide the horizontal scroll bar, just in case the line cannot be wrapped.

luc-github commented 6 days ago

In my view it would be better to make this screen the full size of the browser screen, not the full screen. That would be a useful option for the terminal screen.

PR are welcome if code fooprint is reasonable

rondlh commented 6 days ago

Let me check, it should not be too difficult, I believe the full screen option is a very recent addition anyway. My 38" screen is really too big to put ESP3D in full screen mode.

luc-github commented 5 days ago

Ok good then - I close issue then - feel free to PR when you are ready