Proposal

Signed-off-by: Jean-Yves <7360784+docjyJ@users.noreply.github.com>

php/public/style.css

@@ -1,9 +1,22 @@
 html, body {
     padding: 0;
     margin: 0;
+    height: 100%;
+    width: 100%;
+    overflow: clip;
+    background-color: #0082c9;
+    background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Cantarell, Ubuntu, Helvetica Neue, Arial, Noto Color Emoji, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;;
 }
 
+h1, h2, p {
+    margin: 8px 0 0;
+    text-align: justify;
+}
+h1, h2 {
+    margin-top: 16px;
+}
+
 a {
     text-decoration: none;
     color: #0082c9;
@@ -18,7 +31,7 @@ input[type="submit"] {
     background-color: #0082c9;
     font-weight: bold;
     border-radius: 8px;
-    margin: 3px 3px 3px 0;
+    margin: 0;
     font-size: 14px;
     color: white;
     border: .5px solid black;
@@ -108,36 +121,20 @@ form {
     margin: 0;
 }
 
-input {
-    padding-left: 8px;
-    padding-right: 8px;
-    height: 34px;
-    margin-bottom: 15px;
-    border-radius: 8px;
-    border: .5px solid black;
-}
-
-input:focus {
-    border: 1px solid black;
-}
-
-textarea {
-    border-radius: 8px;
-    border: .5px solid black;
-}
-
-textarea:focus {
-    border: 1px solid black;
-}
-
+input[type="text"],
+input[type="password"],
+textarea,
 select {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding: 10px 8px;
+    margin: 0;
     height: 34px;
     border-radius: 8px;
     border: .5px solid black;
 }
 
+input[type="text"]:focus,
+input[type="password"]:focus,
+textarea:focus,
 select:focus {
     border: 1px solid black;
 }
@@ -177,11 +174,28 @@ select:focus {
 }
 
 main {
-    padding: 20px;
-    max-width: 100%;
-    word-break: break-word;
+    padding: 0;
+    margin: 50px 8px 8px;
+    border-radius: 16px;
+    background-color: white;
+    position: static;
+    overflow: scroll;
+    height: calc(100% - 58px);
+    width: calc(100% - 16px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+}
+
+section {
     max-width: 500px;
     margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: start;
+    gap: 16px
 }
 
 .logo {
@@ -199,12 +213,17 @@ main {
 }
 
 header {
-    background-color: #0082c9;
-    background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
     height: 50px;
     justify-content: space-between;
+    display: inline-flex;
+    position: absolute;
+    top: 0;
+    width: 100%;
     align-items: center;
-    display: flex;
+}
+
+header > form {
+    margin: 0 8px;
 }
 
 .loading {

php/templates/containers.twig

@@ -16,6 +16,7 @@
     </header>
 
     <main>
+    <section>
         <h1>Nextcloud AIO v9.4.1</h1>
 
         {# Add 2nd tab warning #}
@@ -674,6 +675,7 @@
         <script type="text/javascript" src="before-unload.js"></script>
     {% endif %}
 
+    </section>
     </main>
     <div id="overlay">
         <div class="loader"></div>