portico: Remove container and row-fluild bootstrap classes.

Fixes #28526

* Removed `container` and `row-fluid` class from error pages.
* Use a variable for footer height.
* Made header sticky instead of fixed allowing us to position
  page content without adding arbitrary padding or margin at top.
  Header is around 60px in height, so reduced that much top padding
  or margin.

templates/zerver/portico_error_page.html

@@ -2,11 +2,7 @@
 
 {% block portico_content %}
 <div class="error_page">
-    <div class="container">
-        <div class="row-fluid">
     {% block error_page_content %}
     {% endblock %}
-        </div>
-    </div>
 </div>
 {% endblock %}

web/html/5xx.html

@@ -21,8 +21,7 @@
                 </div>
             </div>
         </div>
-        <div class="container">
-            <div class="row-fluid">
+        <div class="error_page">
             <img src="/static/images/errors/500art.svg" alt=""/>
             <div class="errorbox">
                 <div class="errorcontent">
@@ -32,6 +31,5 @@
                 </div>
             </div>
         </div>
-        </div>
     </body>
 </html>

web/styles/portico/portico.css

@@ -1,5 +1,10 @@
 :root {
     --color-background-modal: hsl(0deg 0% 98%);
+    /*
+        It is fine if footer is longer than that
+        since we are only trying to avoid overlap.
+    */
+    --height-footer: 495px;
 }
 
 [data-tippy-root] .tippy-box .tippy-content {
@@ -1010,7 +1015,7 @@ input.new-organization-button {
 }
 
 .error_page {
-    min-height: calc(100vh - 290px);
+    min-height: calc(100vh - var(--height-footer));
     height: 100%;
     background-color: hsl(163deg 42% 85%);
     font-family: "Source Sans 3 VF", sans-serif;

web/styles/portico/portico_signin.css

@@ -4,11 +4,11 @@ html {
 
 .flex {
     display: flex;
-    padding: 80px 0;
+    padding: 20px 0 80px;
     align-items: center;
     justify-content: center;
 
-    min-height: calc(100vh - 402px);
+    min-height: calc(100vh - var(--height-footer));
 }
 
 .m-10 {
@@ -292,7 +292,7 @@ html {
 .header {
     color: hsl(0deg 0% 27%);
     background-color: hsl(0deg 0% 100%);
-    position: fixed;
+    position: sticky;
     width: 100%;
     top: 0;