Fix display of Admin module on small devices

UI/WebServerResources/scss/components/card/card.scss

@@ -18,6 +18,7 @@ md-card {
     }
     .md-icon-button {
       transition: $swift-linear;
+      transition-duration: 0.2s;
       transition-delay: 0.2s;
       opacity: 1;
       &.ng-hide {
@@ -49,7 +50,7 @@ md-card {
   &.sg-expanded {
     @extend .md-whiteframe-z2;
     margin: 0 0 1px 0;
-    &-remove {
+    &-remove { // ngAnimate with ngClass
       transition-delay: 0.5s;
     }
   }

UI/WebServerResources/scss/views/AdministrationUI.scss

@@ -1,20 +1,31 @@
 /// AdministrationUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-[id="usersList"] > md-list {
-  // Since the users list doesn't use the virtual repeater, force the vertical scroll
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-  overflow-y: auto;
+[ui-view="administration"] {
+  [id="usersList"] > md-list {
+    // Since the users list doesn't use the virtual repeater, force the vertical scroll
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    overflow-y: auto;
 
-  .sg-folder .md-button {
-    // Buttons in list-item to view the ACLs of a user's folder
-    @extend .sg-no-wrap;
-    flex: 1 1 auto;
-    text-align: left;
-    text-transform: none;
+    .sg-folder .md-button {
+      // Buttons in list-item to view the ACLs of a user's folder
+      @extend .sg-no-wrap;
+      flex: 1 1 auto;
+      text-align: left;
+      text-transform: none;
+    }
+  }
+
+  .view-detail {
+    @include from(md) {
+      .viewer {
+        // Leave space for a tall toolbar
+        top: $toolbar-tall-height;
+      }
+    }
   }
 }