Print Preview: Fix cut off ripples

Bug: 936787
Change-Id: I7eeb1f3f9da68e6a4274afab2804ea3f2df21366
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1504309Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638242}

chrome/browser/resources/print_preview/new/link_container.html

@@ -11,10 +11,11 @@
     <style include="print-preview-shared throbber cr-hidden-style">
       :host paper-icon-button-light {
         --cr-paper-icon-button-margin: {
-          margin-inline-end: -6px;
+          margin-inline-end: -2px;
           margin-inline-start: 0;
         };
         --cr-icon-size: 16px;
+        --cr-icon-ripple-size: 28px;
       }
 
       .link:not([actionable]) {

chrome/browser/resources/print_preview/new/more_settings.html

@@ -27,6 +27,11 @@
         padding: 0 20px;
       }
 
+      :host cr-expand-button {
+        margin-inline-end: 4px;
+        --cr-icon-button-icon-padding: 4px;
+      }
+
       :host([hidden]) {
         display: none;
       }
@@ -34,10 +39,7 @@
       #label {
         color: var(--google-grey-900);
         flex: 1;
-      }
-
-      :host-context([dir=rtl]) #label {
-        text-align: right;
+        text-align: start;
       }
 
       :host([disabled]) #label {

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html

@@ -9,11 +9,12 @@
     <style>
       :host {
         --cr-icon-button-color: var(--google-grey-refresh-700);
-        --cr-icon-button-icon-padding: 8px;
+        --cr-icon-button-default-icon-padding: 8px;
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-ripple-color: var(--google-grey-900);
         --cr-icon-button-ripple-size: calc(var(--cr-icon-button-icon-size) +
-            2 * var(--cr-icon-button-icon-padding));
+            2 * var(--cr-icon-button-icon-padding,
+                    var(--cr-icon-button-default-icon-padding)));
         --cr-icon-button-size: var(--cr-icon-button-ripple-size);
         background-position: center;
         background-repeat: no-repeat;
@@ -62,7 +63,8 @@
       iron-icon {
         --iron-icon-height: var(--cr-icon-button-icon-size);
         --iron-icon-width: var(--cr-icon-button-icon-size);
-        padding: var(--cr-icon-button-icon-padding);
+        padding: var(--cr-icon-button-icon-padding,
+                     var(--cr-icon-button-default-icon-padding));
       }
     </style>
     <div id="icon"></div>