add: support compact mode for mobile web, auto adapt to small screen/window

client/components/cards/cardDetails.jade

@@ -9,7 +9,7 @@ template(name="cardDetails")
       else
         a.fa.fa-times-thin.close-card-details.js-close-card-details
         if currentUser.isBoardMember
-          a.fa.fa-ellipsis-v.card-details-menu.js-open-card-details-menu
+          a.fa.fa-navicon.card-details-menu.js-open-card-details-menu
         h2.card-details-title.js-card-title(
           class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
             = title

client/components/cards/cardDetails.js

@@ -48,7 +48,7 @@ BlazeComponent.extendComponent({
   },
 
   onRendered() {
-    this.scrollParentContainer();
+    if (!Utils.isMiniScreen()) this.scrollParentContainer();
   },
 
   onDestroyed() {

client/components/cards/cardDetails.styl

@@ -94,3 +94,20 @@ input[type="submit"].attachment-add-link-submit
   margin: 0 0 8px 4px
   padding: 6px 12px
   width: 18%
+
+@media screen and (max-width: 800px)
+  .card-details
+    width: calc(100% - 40px)
+    padding: 0px 20px 0px 20px
+    margin: 0px
+    transition: none
+
+    .card-details-canvas
+      width: 100%
+
+    .card-details-header
+      .close-card-details
+        margin-right: 0px
+
+      .card-details-menu
+        margin-right: 10px

client/components/cards/minicard.styl

@@ -136,3 +136,12 @@
       min-height: 36px
       margin-bottom: 20px
       overflow-y: auto
+
+@media screen and (max-width: 800px)
+  .minicard
+    .is-selected &
+      transform: translateX(0px)
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+      z-index: 15
+      box-shadow: 0 1px 2px rgba(0,0,0,.15)