integrations: Fix arrangement of left sidebar `back to list` button.

I rearranged the elements of the left sidebar in HTML in order to appear
in the order they are displayed and removed the absolute positioning,
because it was not needed if the elements are arranged correctly. I used
`flex` display to arrange them on column.

I removed the styling that positioned the elements absolutely.

Then I tweaked the margins in order to make the elements look good.

Fixes: #12929

static/js/portico/integrations.js

@@ -169,7 +169,7 @@ function hide_catalog_show_integration() {
         $('#integration-instruction-block .integration-lozenge').remove();
         $("#integration-instruction-block")
             .append($lozenge_icon)
-            .css('display', 'block');
+            .css('display', 'flex');
         $('.integration-instructions#' + state.integration).css('display', 'block');
         $("#integration-list-link").css('display', 'block');
 

static/styles/portico/integrations.scss

@@ -262,7 +262,8 @@
 .portico-landing.integrations .integration-instruction-block .integration-lozenge {
     width: 125px;
     height: 170px;
-    margin: 0 21px;
+    margin: 0 21px 20px;
+    order: 1;
 }
 
 .portico-landing.integrations .integration-instruction-block .integration-lozenge .integration-category {
@@ -278,8 +279,7 @@
 }
 
 .portico-landing.integrations .integration-instruction-block .categories {
-    position: absolute;
-    top: 230px;
+    order: 2;
 }
 
 .portico-landing.integrations .integration-instruction-block .categories .integration-category {
@@ -333,10 +333,8 @@
 }
 
 #integration-list-link {
-    position: absolute;
-    text-align: center;
     display: none;
-    margin-left: 5px;
+    margin-left: 30px;
 }
 
 #integration-list-link span {
@@ -344,6 +342,10 @@
     margin-left: 5px;
 }
 
+#integration-instruction-block {
+    flex-direction: column;
+}
+
 /* -- media queries -- */
 @media (min-width: 768px) {
     .integration-instructions {
@@ -351,8 +353,7 @@
     }
 
     #integration-list-link {
-        top: 200px;
-        left: 30px;
+        margin-top: 15px;
     }
 }
 
@@ -470,7 +471,7 @@
     }
 
     #integration-instruction-block {
-        display: flex !important;
+        flex-direction: row;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
@@ -483,7 +484,6 @@
     }
 
     #integration-instruction-block .integration-lozenge {
-        order: 1;
         border: none;
 
         display: flex !important;
@@ -534,7 +534,6 @@
     }
 
     #integration-list-link {
-        order: 2;
         position: unset;
         font-size: 22px;
     }

templates/zerver/integrations/index.html

@@ -138,8 +138,8 @@
 
                 <div id="integration-instructions-group">
                     <div id="integration-instruction-block" class="integration-instruction-block">
-                        <a href="/integrations" id="integration-list-link" class="no-underline"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i><span>Back to list</span></a>
                         <div class="categories"></div>
+                        <a href="/integrations" id="integration-list-link" class="no-underline"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i><span>Back to list</span></a>
                     </div>
 
                     {% for integration in integrations_dict.values() %}