integrations: Make header of integrations/docs on mobile look good.

Change the display from `block` to `flex` in order to be able to
arrange the elements as wanted. Reset the css of the header elements
only for the description view. Add `font-size: 1.2em` because the font
doesn't need resizing in this case, it needs resizing only when the
title is in the box.

Removed the `padding-bottom` from the `nav` on mobile because it
overlaps the new header and you cannot click the back button from the
integrations.

Fixes: #12365.

static/js/portico/integrations.js

@@ -162,7 +162,7 @@ function hide_catalog_show_integration() {
         });
         $('#integration-instructions-group').css({
             opacity: 0,
-            display: 'block',
+            display: 'flex',
         });
         $('.integration-instructions').css('display', 'none');
         $('#' + state.integration + '.integration-instructions .help-content').html(doc);

static/styles/portico/landing-page.scss

@@ -3206,6 +3206,12 @@ nav ul li.active::after {
     }
 }
 
+@media (min-width: 768px) {
+    .integration-instructions {
+        width: calc(100% - 200px);
+    }
+}
+
 @media (max-width: 1295px) {
     .portico-landing.hello .apps .right-side {
         display: none;
@@ -3275,10 +3281,6 @@ nav ul li.active::after {
         height: 1400px;
     }
 
-    nav {
-        padding-bottom: 110px;
-    }
-
     nav.white {
         padding-bottom: 40px;
     }
@@ -3697,8 +3699,38 @@ nav ul li.active::after {
         font-size: 1em;
     }
 
+    #integration-instruction-block {
+        display: flex !important;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid hsl(206, 44%, 93%);
+    }
+
+    .portico-landing.integrations #integration-instructions-group {
+        flex-direction: column;
+    }
+
     #integration-instruction-block .integration-lozenge {
-        display: none !important;
+        order: 1;
+        border: none;
+
+        display: flex !important;
+        justify-content: space-between;
+        height: auto;
+        width: auto;
+        margin: unset;
+        padding: unset;
+    }
+
+    #integration-instruction-block .integration-lozenge .integration-logo {
+        margin: 0;
+    }
+
+    #integration-instruction-block .integration-lozenge .integration-name {
+        font-size: 1.2em !important;
+        margin-left: 20px;
     }
 
     #integration-list-link {
@@ -4134,10 +4166,6 @@ nav ul li.active::after {
         height: auto;
     }
 
-    nav {
-        padding-bottom: 105px;
-    }
-
     .portico-landing.hello .hero {
         padding: 60px 5px 40px 5px;
     }

static/styles/portico/portico.scss

@@ -1135,15 +1135,12 @@ input#terminal:checked ~ #tab-terminal {
 }
 
 @media (min-width: 768px) {
-    .integration-instructions {
-        margin-left: 220px;
-    }
-
     #integration-list-link {
         top: 200px;
         left: 30px;
     }
 }
+
 .api-page-header,
 .authors-page-header,
 .integrations-page-header,
@@ -1225,6 +1222,18 @@ input#terminal:checked ~ #tab-terminal {
     margin-left: 5px;
 }
 
+@media (max-width: 768px) {
+    #integration-list-link {
+        order: 2;
+        position: unset;
+        font-size: 22px;
+    }
+
+    #integration-list-link span {
+        display: none;
+    }
+}
+
 .integrations-page-header .integrations-icon {
     font-size: 22px;
     margin-right: 10px;

templates/zerver/integrations/index.html

@@ -139,7 +139,6 @@
                 <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>
-                        <h3 class="name">Name</h3>
                         <div class="categories"></div>
                     </div>