e2 SAT Editor HTML manual not displayed correctly Topic is solved

[back2themoon]

Hello,

Go here: https://github.com/ctlcltd/e2-sat-editor/releases

...and download the user-manual.zip file. It's a small collection of html files. Or just download index.html, attached in this post.

Wrong, displayed output: (note the overlap)

Wrong.png

Expected output:

Correct.png

Perhaps something is going on with that internal scrollbar, not working in Pale Moon? Couldn't find any reported errors.

[Moonchild]

This is most likely the same issue as some other layout issues indicated, which would be because of @layer support. It's being looked into.

[back2themoon]

Ok, thank you. I missed it, but it's also available online:

https://e2sateditor.com/help/

[Moonchild]

I had a closer look but this doesn't seem to be related to what I thought.
it does seem though that the styling used explicitly places the menu on the left (with inset + fixed), so I'm not sure how this is displayed differently otherwise on other browsers, at the moment..

[adoxa]

The shorthand inset-inline is not recognised. I think (didn't try) you can define userstyle #side { inset-inline-start: auto } to fix it.

[back2themoon]

Thank you, adoxa.

I've been offered this by AI, and it works:

Code: Select all

@-moz-document domain("e2sateditor.com") {
  #side {
    left: auto !important;  /* Equivalent to inset-inline-start:auto */
  }
}

Original suggestion was:

Code: Select all

/* Fix for layout issue on e2sateditor.com - Pale Moon compatibility */
/* Forces logical inset-inline-start property to behave as expected */
#side {
  inset-inline-start: auto;      /* Original shorthand, ignored by Pale Moon */
  left: auto;                    /* Explicit physical equivalent for LTR layout */
  right: initial;                /* Optional reset if direction handling fails */
}

However, because Pale Moon doesn’t understand inset-inline-start, you can safely omit that line and rely on physical properties only. So the truly effective fix is:
(the one on top)

Update: sort of works. Will post again if I get a full fix.

[back2themoon]

After fighting with AI for two hours (I won't make this a habit... it was literally 120 minutes) I got an almost complete fix, at least from the user's perspective.

The "inner" scrollbar itself does not scroll all the way down cleanly, but all content is now visible and correctly positioned.

I asked for a commented version, hope it's helpful to you. Remember I'm the middleman here (which is weird, but it's what it is), I know almost nothing about this stuff.

Code: Select all

@-moz-document domain("e2sateditor.com") {

  /* Ensures right column positions correctly when logical insets are ignored */
  #side {
    left: auto !important;
  }

  /* Sidebar container (#toc)
     - Flex layout keeps heading fixed and allows internal scrolling
     - Full viewport height for consistent sizing
     - Remaining minor scrollbar alignment differences are expected */
  #toc {
    position: relative !important;
    height: 100vh !important;
    overflow: hidden !important;        /* prevents nested scrollbars */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Heading (“Contents”)
     - Static element, not part of the scrollable area
     - Background retained for visual consistency */
  #toc > h4 {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: .6em .8em !important;
    background: inherit !important;
    z-index: 1 !important;
  }

  /* Scrollable section (<nav.nav-side>)
     - Fills remaining space within container
     - min-height:0 enables scroll behaviour inside flex layout
     - Padding provides small clearance and prevents cutoff at bottom
     - Note: scrollbar track may not render perfectly flush at the end */
  #toc > nav.nav-side {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding-right: 8px !important;
    padding-bottom: 6px !important;
  }
}

[tellu-white]

After fighting with AI for two hours (I won't make this a habit... it was literally 120 minutes) I got an almost complete fix, at least from the user's perspective.

I tried the version proposed by adoxa, to which I added a line of CSS code. It seems to work - and it's much shorter:

Code: Select all

@-moz-document domain("e2sateditor.com") {
	#side{
		inset: 0px 0px 60px 0px !important;
		inset-inline-start: auto !important;
	}
}

Screenshots:

01.jpg

02.jpg

03.jpg

04.jpg

[back2themoon]

I tried the version proposed by adoxa, to which I added a line of CSS code. It seems to work - and it's much shorter.

Thank you too, tellu-white. That fixes all issues of this particular case.

And yet again proves that multi-million "AI" remains way off.

[tellu-white]

I tried the version proposed by adoxa, to which I added a line of CSS code. It seems to work - and it's much shorter.

Thank you too, tellu-white. That fixes all issues of this particular case.

And yet again proves that multi-million "AI" remains way off.

You're Welcome, back2themoon!

The score in the match "adoxa" vs. "AI" = 1-0 for adoxa

[Moonchild]

The shorthand inset-inline is not recognised. I think (didn't try) you can define userstyle #side { inset-inline-start: auto } to fix it.

I've added an issue for implementing the CSS shorthand. Help appreciated!
Issue #2857 (UXP)

[tellu-white]

It would be more accurate to apply the CSS change only to the "help" pages instead of the entire domain, as other pages belonging to the "e2sateditor.com" domain may require different settings (such as for "inset: 0px 0px 60px 0px").

Modified CSS code:

Code: Select all

@-moz-document url-prefix("https://e2sateditor.com/help/") {
	#side{
		inset: 0px 0px 60px 0px !important;
		inset-inline-start: auto !important;
	}
}

[back2themoon]

...apply the CSS change only to the "help" pages instead of the entire domain...

Good point, thanks.

[Goodydino]

Hello,

Go here: https://github.com/ctlcltd/e2-sat-editor/releases

...and download the user-manual.zip file. It's a small collection of html files. Or just download index.html, attached in this post.

I do not see any user-manual zip file on that page. All I see are e2-sat-editor zip files.

[back2themoon]

I do not see any user-manual zip file on that page.

User manual.png

[Moonchild]

I've implemented inset-block and inset-inline shorthands, to be released with the new milestone 34.0

[back2themoon]

I've implemented inset-block and inset-inline shorthands, to be released with the new milestone 34.0

Thanks for this. This particular issue seems still present on PM 34. Userstyle workaround works fine.

https://e2sateditor.com/help/

[vannilla]

The devtools list inset-inline as used by the site as an invalid property value.
It's crossed out and sports a yellow warning triangle on the side.
If I try to manually insert it like inset-inline: auto it is recognized, but the moment I use auto 0 it becomes invalid.

[Goodydino]

That file displays improperly in SeaMonkey as well as in Pale Moon. It is fine with Vivaldi, Safari, Waterfox and LibreWolf.

[FranklinDM]

If I try to manually insert it like inset-inline: auto it is recognized, but the moment I use auto 0 it becomes invalid.

Parsing code for the new CSS props might need to be adjusted if that's the case.