[Performance Settings] Fix left padding for currently opened sites list

Previously the checkbox ripple for the currently opened sites list in
the add exception dialog was being cut off, because it would expand past
the bounds of the container. Adding padding to the container would solve
this issue, but to preserve the same amount of total padding from the
dialog's left edge, the dialog's body slot has its padding set to 0.

Before:
https://screenshot.googleplex.com/8hzSFJRQfwYK9JN.png

After:
https://screenshot.googleplex.com/4cWCLzWPkTN9eua.png

Bug: 1424223
Change-Id: I1fe38e7d967bd5eff79b213cb4f363537b630877
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4577929
Auto-Submit: Charles Meng <charlesmeng@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1152821}

chrome/browser/resources/settings/performance_page/tab_discard_exception_current_sites_list.html

@@ -1,4 +1,10 @@
 <style include="settings-shared">
+  /* add padding so that checkbox ripple is not cut off */
+  .ripple-padding {
+    padding-inline-end: 20px;
+    padding-inline-start: 20px;
+  }
+
   cr-checkbox::part(label-container) {
     min-width: 0;
   }
@@ -19,7 +25,7 @@
       aria-rowcount$="[[currentSites_.length]]"
       hidden$="[[!currentSites_.length]]">
     <template>
-      <cr-checkbox class="list-item no-outline" role="row"
+      <cr-checkbox class="list-item no-outline ripple-padding" role="row"
           tab-index="[[tabIndex]]"
           aria-rowindex$="[[getAriaRowindex_(index)]]"
           on-change="onToggleSelection_" checked="{{selected}}">

chrome/browser/resources/settings/performance_page/tab_discard_exception_tabbed_add_dialog.html

@@ -19,11 +19,26 @@
     height: 250px;
   }
 
+  /*
+   * remove padding as we will introduce the padding on an inner element so as
+   * not to cut off the checkbox ripple
+   */
+  #body {
+    padding-inline-end: 0;
+    padding-inline-start: 0;
+  }
+
   #helpText {
     padding-bottom: 20px;
   }
 
+  /*
+   * adds horizontal padding to account for the removed padding from the dialog
+   * body
+   */
   #inputPage {
+    padding-inline-end: 20px;
+    padding-inline-start: 20px;
     padding-top: 20px;
   }
 </style>
@@ -33,7 +48,7 @@
     <cr-tabs id="tabs" tab-names="[[tabNames_]]" selected="{{selectedTab_}}">
     </cr-tabs>
   </div>
-  <div slot="body">
+  <div id="body" slot="body">
     <iron-pages selected="[[selectedTab_]]">
       <tab-discard-exception-current-sites-list id="list" prefs="{{prefs}}"
           on-sites-populated="onSitesPopulated_"