[enhancement] Improve layout for config screen

[Herbert-Hotz]

Hi,
I think that the config screen needs a small improvement: Currently the editor element overlaps on top
with title element (Chrome browser, others not tested).

ui/src/scss/styles.scss

#config-editor {
  position: absolute;
  bottom: 30px;
  top: 140px;
  right: 15px;
  left: 15px;
  width: auto;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

Recommended change: top: 170px

[oznu]

Hi @Herbert-Hotz,

Thanks for raising this. Would you be able to upload a screenshot so I can see what's going on?

[Herbert-Hotz]

BTW: Windows 10 / Google Chrome is up to date Version 64.0.3282.167 (Official Build) (64-bit)

Here comes a screenshot:

[Herbert-Hotz]

I made a test on a another Windows 10 host with a different Google Chrome version and everything looked fine:
Google Chrome is up to date
Version 65.0.3325.73 (Official Build) beta (64-bit)

Strange enough!! Please do NOT invest too much time - it might be a browser issue.

Thanks nevertheless for taking care.

[oznu]

Hi @Herbert-Hotz,

This should be fixed in 2.6.3. I have changed the config editor to use flexbox instead of position: absolute; to stretch the element to the bottom of the page. The editors position is now relative to the title element and should never be able to overlap.

I was not able to replicate this on any of the browsers I test on, so please let me know if this fixed it for you.

[Herbert-Hotz]

Hi @oznu,

Thanks for your super fast response and fix! Well done - works great now.