TiddlyWiki / TiddlyWiki5

A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.
https://tiddlywiki.com/
Other
8.05k stars 1.19k forks source link

[BUG] .tc-error-form positioning/size issue #8587

Open CodaCodr opened 2 months ago

CodaCodr commented 2 months ago

Describe the bug

When using a super-wide TiddlyWiki, RSOEs are embarrassingly wide and ungainly.

(They also appear twice in the dom though that may be wiki/error specific.)

Expected behavior

The CSS should be addressed such that RSOEs display better.

To Reproduce

Setup Tiddlywiki on 2, 3 or 4 (,y case) monitors. Cause an RSOE. Observe.

Screenshots

No response

TiddlyWiki Configuration

5.3.3 FF Latest Win10

Additional context

Proposed fix:

.tc-error-form {
    font-family: sans-serif;
    color: #fff;
    z-index: 20000;
    position: fixed;
    background-color: rgb(255, 75, 75);
    border: 8px solid rgb(255, 0, 0);
    border-radius: 8px;
    /* REMOVE width altogether */
    /* REMOVE margin-left */
    margin-top: 4em;
    padding: 0 2em 1em 2em;
    /* NEW */ right: 50em; 
}

I have no particular preference for choosing em units for right. Since margin/padding are based on em, seems okay from here. And, since I (and I guess most people) would not change font sizes between wikis, 50em will hopefully offer consistency.

right: 50em places the box ~centered on my right-most monitor, midway over story and sidebar. The previous width setting, 50%, made the box 2 monitors (of 4) wide.

pmario commented 2 months ago

Adjusting the CSS should be doable. But in the first place RSOD should not happen. So it would be interesting where they come from

Jermolene commented 2 months ago

Thanks @CodaCodr I agree that the current styling is poor on wide screen monitors, and I would welcome a PR.