fix(ripple): Revert #1098 to fix bounded ripples

packages/mdc-ripple/foundation.js

@@ -471,7 +471,7 @@ export default class MDCRippleFoundation extends MDCFoundation {
     this.frame_ = this.adapter_.computeBoundingRect();
 
     const maxDim = Math.max(this.frame_.height, this.frame_.width);
-    const surfaceDiameter = Math.min(this.frame_.width, this.frame_.height);
+    const surfaceDiameter = Math.sqrt(Math.pow(this.frame_.width, 2) + Math.pow(this.frame_.height, 2));
 
     // 60% of the largest dimension of the surface
     this.initialSize_ = maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE;

packages/mdc-toolbar/mdc-toolbar.scss

@@ -93,10 +93,8 @@
     cursor: pointer;
   }
 
-  @media (min-width: $mdc-toolbar-mobile-breakpoint) {
-    &__icon:last-of-type {
-      margin-right: 8px;
-    }
+  &__icon:last-of-type {
+    padding-right: 16px;
   }
 
   &__icon--menu {
@@ -117,6 +115,10 @@
     padding: 16px;
   }
 
+  .mdc-toolbar__icon:last-child {
+    padding: 16px 8px;
+  }
+
   .mdc-toolbar__title {
     margin-left: 16px !important;
   }

test/unit/mdc-ripple/foundation.test.js

@@ -253,7 +253,7 @@ testFoundation(`#layout sets ${strings.VAR_FG_SCALE} based on the difference bet
 
   const maxSize = Math.max(width, height);
   const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;
-  const surfaceDiameter = Math.min(width, height);
+  const surfaceDiameter = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
   const maxRadius = surfaceDiameter + numbers.PADDING;
   const fgScale = maxRadius / initialSize;