Make UI more responsive

[erdengk]

This PR is used to solve the display bug it mentioned.
Before modification：

After modification：

[vogti]

Hi Kevin,
Thanks for this pull request. Unfortunately, your fix does only work for your specific monitor resolution:

Can you make this more universal?

[erdengk]

OK, I'll try again

[erdengk]

@vogti
Hello, I used a new way to fix this bug. Please review it. Thanks.

In the figure below, the browser window is zoomed to the minimum The foot bar is not blocked or in the wrong place.

In the figure below, the browser window is zoomed to medium The foot bar is not blocked or in the wrong place.

In the figure below, the browser window is zoomed to the maximum The foot bar is not blocked or in the wrong place

[vogti]

But now it is no longer centered if the window exceeds a certain width. Furthermore, the footer is only visible if you scroll.

I think to fix this, it is required to calculate a max-height for the white box. Since everything is dynamic, this part needs to be dynamic as well.

[erdengk]

OK, I'll try to repair it again.

[erdengk]

Hello, I made a new modification according to your opinion.Please review it. Thanks.
The latest effect is shown in the following figures. No matter how you change the window size, the middle box is always in the middle, and you can see the footer without scrolling.

About the problem you mentioned that when the maximum width is exceeded, it cannot be centered.
I use such a solution：
In the following figure, when the window becomes larger, the button in the middle will be enlarged to the same scale and will always be in the middle.

In the following figure, when the window width becomes large, the middle button will always be enlarged, but a navigation bar will be generated on the right side of the browser to allow users to browse down.
By the way, I modified the styles of PDB and Pui in footer so that they will not exceed the footer due to window changes.

[erdengk]

Hi, @vogti Maybe my method is not very good, but I am willing to continue to learn and improve it. Please give some suggestions. Thanks

[vogti]

Hi @erdengk
Sorry for the late replay. There has been a lot going on since new year. Your new approach looks much better. However, it does no longer resolve the issue you have pointed out initially.

[erdengk]

Oh, my God. Let me try to continue to fix this problem.