Add responsiveness to compact inline

jet/static/jet/css/_changeform.scss

@@ -508,6 +508,11 @@ body.popup .submit-row {
   &.compact {
     position: relative;
     min-height: 400px;
+
+    @include for-mobile {
+      position: static;
+      min-height: 0;
+    }
   }
 
   thead th {
@@ -642,19 +647,27 @@ body.popup .submit-row {
 .inline-navigation {
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
+  left: 0;
   width: 200px;
   background: $content-contrast-background-color;
 
+  @include for-mobile {
+    position: relative;
+    width: auto;
+    top: auto;
+    bottom: auto;
+    left: auto;
+  }
+
   &-top {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
-    height: 40px;
-    background: -webkit-linear-gradient(to bottom, $content-background-color 0%, $content-contrast-background-color 100%);
-    background: linear-gradient(to bottom, $content-background-color 0%, $content-contrast-background-color 100%);
+    height: 50px;
+    background: linear-gradient(to bottom, $content-background-color 25%, transparentize($content-contrast-background-color, 1) 100%);
+    z-index: 1;
   }
 
   &-bottom {
@@ -662,9 +675,22 @@ body.popup .submit-row {
     right: 0;
     bottom: 0;
     left: 0;
-    height: 40px;
-    background: -webkit-linear-gradient(to top, $content-background-color 0%, $content-contrast-background-color 100%);
-    background: linear-gradient(to top, $content-background-color 0%, $content-contrast-background-color 100%);
+    height: 50px;
+    background: linear-gradient(to top, $content-background-color 25%, transparentize($content-contrast-background-color, 1) 100%);
+    z-index: 1;
+
+    @include for-mobile {
+      display: none;
+    }
+  }
+
+  .add-row {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    left: 0;
+    padding: 0 16px !important;
+    z-index: 1;
   }
 
   &-content {
@@ -673,7 +699,19 @@ body.popup .submit-row {
     right: 0;
     bottom: 0;
     left: 0;
+    padding: 40px 0 20px 0;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    @include for-mobile {
+      position: static;
+      top: auto;
+      right: auto;
+      bottom: auto;
+      left: auto;
+      padding-bottom: 10px;
+      max-height: 200px;
+    }
   }
 
   &-item {
@@ -687,7 +725,7 @@ body.popup .submit-row {
       transition: background-color $transitions-duration, color $transitions-duration;
     }
 
-    &:hover {
+    body.no-touchevents &:hover, &:active {
       background: $button-hover-background-color;
       color: $button-hover-text-color;
     }
@@ -759,6 +797,10 @@ body.popup .submit-row {
     display: none;
     margin-left: 200px;
 
+    @include for-mobile {
+      margin-left: 0;
+    }
+
     &.selected {
       display: block;
     }

jet/templates/admin/edit_inline/compact.html

@@ -8,11 +8,10 @@
     <div class="inline-navigation">
         <div class="inline-navigation-top"></div>
         <div class="inline-navigation-bottom"></div>
+        <div class="add-row">
+            <a href="#">{% blocktrans with verbose_name=inline_admin_formset.opts.verbose_name|capfirst %}Add another {{ verbose_name }}{% endblocktrans %}</a>
+        </div>
         <div class="inline-navigation-content">
-            <div class="add-row">
-                <a href="#">{% blocktrans with verbose_name=inline_admin_formset.opts.verbose_name|capfirst %}Add another {{ verbose_name }}{% endblocktrans %}</a>
-            </div>
-
             <div class="inline-navigation-items">
                 {% for inline_admin_form in inline_admin_formset %}
                     <a href="#" class="inline-navigation-item{% if forloop.last %} empty{% endif %}" data-inline-related-id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">