MD Settings: Responsive sub-page width

The width only needs to be set explicitly during animations, when the card
is position: fixed.

BUG=608134
R=dbeam@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2041073002
Cr-Commit-Position: refs/heads/master@{#398217}

chrome/browser/resources/settings/settings_page/main_page_behavior.js

@@ -251,6 +251,7 @@ var MainPageBehaviorImpl = {
       // Whether finished or canceled, clean up the animation.
       section.classList.remove('expanding');
       card.style.height = '';
+      card.style.width = '';
     });
 
     return promise;
@@ -271,6 +272,7 @@ var MainPageBehaviorImpl = {
     var startingTop = this.parentElement.getBoundingClientRect().top;
 
     var cardHeightStart = card.clientHeight;
+    var cardWidthStart = card.clientWidth;
 
     section.classList.add('collapsing');
     section.classList.remove('expanding', 'expanded');
@@ -309,7 +311,13 @@ var MainPageBehaviorImpl = {
     var options = /** @type {!KeyframeEffectOptions} */({
       duration: EXPAND_DURATION
     });
-    return this.animateElement('section', card, keyframes, options);
+
+    card.style.width = cardWidthStart + 'px';
+    var promise = this.animateElement('section', card, keyframes, options);
+    promise.then(function() {
+      card.style.width = '';
+    });
+    return promise;
   },
 };