[GM3Restyling] Fixing padding for list items in Ignore Listing page

With this padding fix, the selected line background spans over the
entire line.

Before: https://i.imgur.com/1roQoE7.png
After: https://i.imgur.com/41RR1sN.png
Bug: 368238837
Change-Id: I4fe1968177e0cb231fb91c9d0bd1110fd8ec7eed
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5952203
Auto-Submit: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -160,6 +160,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     settingsContent.appendChild(generalExclusionGroupCard);
 
     const customExclusionGroup = this.createSettingGroup();
+    customExclusionGroup.classList.add('custom-exclusion-group');
     const customExclusionGroupCard = new Cards.Card.Card();
     customExclusionGroupCard.classList.add('ignore-list-options');
     customExclusionGroupCard.data = {

front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -15,7 +15,7 @@
 }
 
 .add-button {
-  margin: 10px 2px;
+  padding: var(--sys-size-5) var(--sys-size-6);
   align-self: flex-start;
   flex: none;
 }
@@ -24,9 +24,14 @@
   flex: 0 1 auto;
 }
 
+.custom-exclusion-group {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .ignore-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  padding: var(--sys-size-3) var(--sys-size-5);
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   position: relative;