UI: Make document body a flexbox (#6139)

* UI: Make document body a flexbox

Fixes: https://github.com/go-gitea/gitea/issues/6118

* ie11 fixes

* increase padding to 80px

* add flex-grow

9 files changed, 5 insertions, 16 deletions

diff --git a/public/less/_admin.less b/public/less/_admin.less
index 713d07beea..7eb7be0d9e 100644
--- a/public/less/_admin.less
+++ b/public/less/_admin.less
@@ -1,6 +1,5 @@
 .admin {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .table.segment {
         padding: 0;
diff --git a/public/less/_base.less b/public/less/_base.less
index bdf56f4eab..17638b7632 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -1,10 +1,10 @@
-@footer-margin: 40px;
-
 body {
     font-family: "Lato", "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
     background-color: #fff;
     overflow-y: scroll;
     -webkit-font-smoothing: antialiased;
+    display: flex;
+    flex-direction: column;
 }
 img {
     border-radius: 3px;
@@ -56,9 +56,8 @@ pre, code {
     hyphens: auto;
 }
 .full.height {
-    padding: 0;
-    margin: 0 0 calc(-@footer-margin - 2px) 0;
-    min-height: 100%;
+    flex-grow: 1;
+    padding-bottom: 80px;
 }
 .following.bar {
     z-index: 900;
@@ -440,11 +439,10 @@ pre, code {
 }
 
 footer {
-    position: absolute;
     background-color: white;
     border-top: 1px solid #d6d6d6;
-    clear: both;
     width: 100%;
+    height: 40px;
     color: #888888;
     .container {
         width: 100vw !important;
diff --git a/public/less/_dashboard.less b/public/less/_dashboard.less
index 1b247a57c2..f65007512e 100644
--- a/public/less/_dashboard.less
+++ b/public/less/_dashboard.less
@@ -1,6 +1,5 @@
 .dashboard {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     &.feeds,
     &.issues {
diff --git a/public/less/_explore.less b/public/less/_explore.less
index 61cdf8dbf8..25cd1c1411 100644
--- a/public/less/_explore.less
+++ b/public/less/_explore.less
@@ -1,6 +1,5 @@
 .explore {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .navbar {
         justify-content: center;
diff --git a/public/less/_home.less b/public/less/_home.less
index 0657c58d8c..ace6102596 100644
--- a/public/less/_home.less
+++ b/public/less/_home.less
@@ -1,5 +1,4 @@
 .home {
-	padding-bottom: @footer-margin * 2;
 	.logo {
 		max-width: 220px;
 	}
@@ -45,7 +44,6 @@
 
 .signup {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 }
 
 footer {
diff --git a/public/less/_install.less b/public/less/_install.less
index 4953ff0d4e..3463370446 100644
--- a/public/less/_install.less
+++ b/public/less/_install.less
@@ -1,6 +1,5 @@
 .install {
     padding-top: 45px;
-    padding-bottom: @footer-margin * 2;
     form {
         @input-padding: 320px !important;
         label {
diff --git a/public/less/_organization.less b/public/less/_organization.less
index f3236236c5..02c5f1f2ee 100644
--- a/public/less/_organization.less
+++ b/public/less/_organization.less
@@ -1,6 +1,5 @@
 .organization {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .head {
         .ui.header {
diff --git a/public/less/_repository.less b/public/less/_repository.less
index dcd51615d6..2b022c5ed3 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -2,7 +2,6 @@
     @mega-octicon-width: 30px;
 
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .repo-header {
         .ui.compact.menu {
diff --git a/public/less/_user.less b/public/less/_user.less
index e95bb7b305..fe8fbe2e8d 100644
--- a/public/less/_user.less
+++ b/public/less/_user.less
@@ -1,7 +1,6 @@
 .user {
     &:not(.icon) {
         padding-top: 15px;
-        padding-bottom: @footer-margin * 2;
     }
 
     &.profile {