MD Settings: Responsive sub-page width

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Fast out, slow in.
 var EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)';
 var EXPAND_DURATION = 350;
 
 /**
  * Provides animations to expand and collapse individual sections in a page.
@@ skipping 233 matching lines @@
       card.style.top = '';
       this.style.margin = 'auto';
       section.$.header.hidden = true;
       section.style.height = '';
     }.bind(this), function() {
       // The animation was canceled; catch the error and continue.
     }).then(function() {
       // Whether finished or canceled, clean up the animation.
       section.classList.remove('expanding');
       card.style.height = '';
+      card.style.width = '';
     });
 
     return promise;
   },
 
   /**
    * Collapses the card in |section| back to its normal position.
    * @param {!SettingsSectionElement} section
    * @return {!Promise}
    * @private
    */
   playCollapseSection_: function(section) {
     var card = section.$.card;
 
     this.style.margin = '';
     section.$.header.hidden = false;
 
     var startingTop = this.parentElement.getBoundingClientRect().top;
 
     var cardHeightStart = card.clientHeight;
+    var cardWidthStart = card.clientWidth;
 
     section.classList.add('collapsing');
     section.classList.remove('expanding', 'expanded');
 
     // If we navigated here directly, we don't know the original height of the
     // section, so we skip the animation.
     // TODO(michaelpg): remove this condition once sliding is implemented.
     if (isNaN(card.origHeight_))
       return Promise.resolve();
 
@@ skipping 18 matching lines @@
       top: startingTop + 'px',
       minHeight: cardHeightStart + 'px',
       easing: EASING_FUNCTION,
     }, {
       top: targetTop + 'px',
       minHeight: card.origHeight_ + 'px',
     }];
     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;
   },
 };
 
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   TransitionBehavior,
   MainPageBehaviorImpl
 ];
 
@@ skipping 73 matching lines @@
         this.$$('[section=' + section + ']'));
   },
 };
 
 
 /** @polymerBehavior */
 var RoutableBehavior = [
   MainPageBehavior,
   RoutableBehaviorImpl
 ];