[App Management] UI Fix-up for Medium Priority Issues.

This CL fixes some relatively subtle but important issues of UI including:
1. Bad wrapping behavior in permission header for small windows
2. Permission row is not fully clickable
3. The resize behaviour is not consistent with other projects
4. The scroll behavior is bad in small window
5. Item's cursor is default instead of a pointer, and it is now user-selectible
6. Change the min-width of cr-card-elevation to ensure the consistency across
bookmarks, history, setting, downloads, and extension

Bug: 906508
Change-Id: I008c3a4f28fabc71c79da549fc860d37f7aa503c
Reviewed-on: https://chromium-review.googlesource.com/c/1425843
Commit-Queue: Cecilia Ni <ceciliani@google.com>
Reviewed-by: calamity <calamity@chromium.org>
Reviewed-by: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#631544}
diff --git a/chrome/browser/resources/app_management/BUILD.gn b/chrome/browser/resources/app_management/BUILD.gn
index d08ea2c..26d7ef7 100644
--- a/chrome/browser/resources/app_management/BUILD.gn
+++ b/chrome/browser/resources/app_management/BUILD.gn
@@ -22,6 +22,7 @@
       ":metadata_view",
       ":notifications_view",
       ":permission_item",
+      ":permission_toggle",
       ":permission_view_header",
       ":pwa_permission_view",
       ":reducers",
@@ -154,11 +155,18 @@
   js_library("permission_item") {
     deps = [
       ":fake_page_handler",
+      ":permission_toggle",
       ":store_client",
       ":util",
     ]
   }
 
+  js_library("permission_toggle") {
+    deps = [
+      ":util",
+    ]
+  }
+
   js_library("permission_view_header") {
     deps = [
       ":browser_proxy",
diff --git a/chrome/browser/resources/app_management/app.html b/chrome/browser/resources/app_management/app.html
index 8fe97d0..1cc85b4 100644
--- a/chrome/browser/resources/app_management/app.html
+++ b/chrome/browser/resources/app_management/app.html
@@ -20,12 +20,22 @@
   <template>
     <style include="app-management-shared-css">
     :host {
+      display: flex;
+      flex-direction: column;
       font-size: var(--app-management-font-size);
+      height: 100%;
       line-height: var(--app-management-line-height);
+      overflow: hidden;
     }
 
     cr-toolbar {
       background: var(--md-toolbar-color);
+      min-height: var(--toolbar-height);
+    }
+
+    #main-container {
+      overflow: auto;
+      padding: 0 40px;
     }
     </style>
     <cr-toolbar
@@ -33,24 +43,26 @@
         search-prompt="$i18n{searchPrompt}"
         on-search-changed="onSearchChanged_">
     </cr-toolbar>
-    <app-management-dom-switch id="view-selector"
-        route="[[selectedRouteId_(currentPage_, searchTerm_)]]">
-      <template>
-        <app-management-main-view route-id="main-view">
-        </app-management-main-view>
-        <app-management-notifications-view route-id="notifications-view">
-        </app-management-notifications-view>
-        <app-management-pwa-permission-view route-id="pwa-permission-view">
-        </app-management-pwa-permission-view>
-        <app-management-chrome-app-permission-view
-            route-id="chrome-app-permission-view">
-        </app-management-chrome-app-permission-view>
-        <app-management-arc-permission-view route-id="arc-permission-view">
-        </app-management-arc-permission-view>
-        <app-management-search-view route-id="search-view">
-        </app-management-search-view>
-      </template>
-    </app-management-dom-switch>
+    <div id="main-container">
+      <app-management-dom-switch id="view-selector"
+          route="[[selectedRouteId_(currentPage_, searchTerm_)]]">
+        <template>
+          <app-management-main-view route-id="main-view">
+          </app-management-main-view>
+          <app-management-notifications-view route-id="notifications-view">
+          </app-management-notifications-view>
+          <app-management-pwa-permission-view route-id="pwa-permission-view">
+          </app-management-pwa-permission-view>
+          <app-management-chrome-app-permission-view
+              route-id="chrome-app-permission-view">
+          </app-management-chrome-app-permission-view>
+          <app-management-arc-permission-view route-id="arc-permission-view">
+          </app-management-arc-permission-view>
+          <app-management-search-view route-id="search-view">
+          </app-management-search-view>
+        </template>
+      </app-management-dom-switch>
+    </div>
     <app-management-router></app-management-router>
   </template>
   <script src="app.js"></script>
diff --git a/chrome/browser/resources/app_management/app_item.html b/chrome/browser/resources/app_management/app_item.html
index 0a79469..a9683bf 100644
--- a/chrome/browser/resources/app_management/app_item.html
+++ b/chrome/browser/resources/app_management/app_item.html
@@ -14,6 +14,7 @@
         align-items: center;
         border-top: var(--card-separator);
         color: var(--primary-text-color);
+        cursor: pointer;
         display: flex;
         flex-direction: row;
         font-weight: 400;
diff --git a/chrome/browser/resources/app_management/main_view.html b/chrome/browser/resources/app_management/main_view.html
index 50347e4..570d483c 100644
--- a/chrome/browser/resources/app_management/main_view.html
+++ b/chrome/browser/resources/app_management/main_view.html
@@ -54,6 +54,7 @@
 
       .notification-row {
         align-items: center;
+        cursor: pointer;
         display: inline-flex;
         justify-content: space-between;
         padding: 0 24px;
@@ -100,15 +101,14 @@
     </div>
 
     <div class="card-container">
-      <span class="notification-row">
+      <span class="notification-row" on-click="onClickNotificationSublabel_">
         <div class="notification-row-sublabel">
           <div class="header-text">
               $i18n{notifications}
           </div>
           <div id="notifications-sublabel" class="secondary-text"></div>
         </div>
-        <paper-icon-button-light class="subpage-arrow" actionable
-            on-click="onClickNotificationSublabel_">
+        <paper-icon-button-light class="subpage-arrow" actionable>
           <button></button>
         </paper-icon-button-light>
       </span>
diff --git a/chrome/browser/resources/app_management/permission_item.html b/chrome/browser/resources/app_management/permission_item.html
index 3b41326..55b8054 100644
--- a/chrome/browser/resources/app_management/permission_item.html
+++ b/chrome/browser/resources/app_management/permission_item.html
@@ -10,6 +10,7 @@
     <style include="app-management-shared-css">
       :host {
         align-items: center;
+        cursor: pointer;
         display: flex;
         justify-content: space-between;
       }
@@ -27,7 +28,7 @@
       </template>
       <div id="permission-label">[[permissionLabel]]</div>
     </div>
-    <app-management-permission-toggle
+    <app-management-permission-toggle id="permission-toggle"
         app="[[app_]]" permission-type="[[permissionType]]">
     </app-management-permission-toggle>
   </template>
diff --git a/chrome/browser/resources/app_management/permission_item.js b/chrome/browser/resources/app_management/permission_item.js
index c0664f0..5700c4b 100644
--- a/chrome/browser/resources/app_management/permission_item.js
+++ b/chrome/browser/resources/app_management/permission_item.js
@@ -34,8 +34,23 @@
     icon: String,
   },
 
+  listeners: {
+    'click': 'onClick_',
+  },
+
   attached: function() {
     this.watch('app_', state => app_management.util.getSelectedApp(state));
     this.updateFromStore();
   },
+
+  /**
+   * @private
+   */
+  onClick_: function(e) {
+    e.preventDefault();
+
+    const /** @type {AppManagementPermissionToggleElement} */ toggle =
+        this.$['permission-toggle'];
+    toggle.togglePermission_();
+  },
 });
diff --git a/chrome/browser/resources/app_management/permission_toggle.js b/chrome/browser/resources/app_management/permission_toggle.js
index 3d60d26..77c3060 100644
--- a/chrome/browser/resources/app_management/permission_toggle.js
+++ b/chrome/browser/resources/app_management/permission_toggle.js
@@ -34,9 +34,7 @@
     return app_management.util.getPermissionValueBool(app, permissionType);
   },
 
-  /**
-   * @private
-   */
+
   togglePermission_: function() {
     assert(this.app);
 
diff --git a/chrome/browser/resources/app_management/pwa_permission_view.js b/chrome/browser/resources/app_management/pwa_permission_view.js
index 77790af..bc475ed9 100644
--- a/chrome/browser/resources/app_management/pwa_permission_view.js
+++ b/chrome/browser/resources/app_management/pwa_permission_view.js
@@ -30,6 +30,9 @@
     this.listExpanded_ = false;
   },
 
+  /**
+   * @private
+   */
   onClickSiteSettingsButton_: function() {
     app_management.BrowserProxy.getInstance().handler.openNativeSettings(
         this.app_.id);
diff --git a/chrome/browser/resources/app_management/shared_style.html b/chrome/browser/resources/app_management/shared_style.html
index 7cfc0a8..9193bb4 100644
--- a/chrome/browser/resources/app_management/shared_style.html
+++ b/chrome/browser/resources/app_management/shared_style.html
@@ -13,7 +13,8 @@
         display: flex;
         flex-direction: column;
         margin: 24px auto;
-        width: var(--card-width);
+        max-width: var(--card-width);
+        min-width: 550px;
       }
 
       .separated-row {
@@ -56,6 +57,7 @@
 
       .native-settings-button {
         --paper-button-ink-color: none;
+        --hover-bg-color: var(--google-grey-refresh-100);
         border: none;
         display: flex;
         font-size: 12px;
diff --git a/chrome/browser/resources/app_management/shared_vars.html b/chrome/browser/resources/app_management/shared_vars.html
index 860c609..1d62aba 100644
--- a/chrome/browser/resources/app_management/shared_vars.html
+++ b/chrome/browser/resources/app_management/shared_vars.html
@@ -20,6 +20,7 @@
     --primary-text-color: rgba(0, 0, 0, 0.87);
     --secondary-font-weight: 400;
     --secondary-text-color: rgba(0, 0, 0, 0.54);
+    --toolbar-height: 56px;
   }
 </style>
 </custom-style>