fix: update padding for the gas fee pill component (#32170)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR aims to update the gas fee pill component padding accordingly to
the
[figma](https://www.figma.com/design/ZQhseNxkXtyPFfngynkpDj/Choose-gas-token?node-id=1149-21826&t=SkCW2aHM5BorIxkq-4).
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/32170?quickstart=1)

## **Related issues**

Fixes: MetaMask/MetaMask-planning#4605

## **Manual testing steps**
Need to have more tokens.
1. Go to this the test dapp
2. Click on Send EIP 1559 Transaction

## **Screenshots/Recordings**
![Screenshot from 2025-04-22
14-09-57](https://github.com/user-attachments/assets/eeb71a33-bcd5-4bbf-9303-7d0c915f0cee)

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: vinistevam

ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap

@@ -280,9 +280,9 @@ exports[`Info renders info section for approve request 1`] = `
             $0.08
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"
@@ -619,9 +619,9 @@ exports[`Info renders info section for contract interaction request 1`] = `
             $0.04
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"
@@ -1082,9 +1082,9 @@ exports[`Info renders info section for setApprovalForAll request 1`] = `
             $0.08
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"

ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap

@@ -346,9 +346,9 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
             0.0001
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"

ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap

@@ -262,9 +262,9 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
             $0.04
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"

ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap

@@ -412,9 +412,9 @@ exports[`NativeTransferInfo renders correctly 1`] = `
             $0.08
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"

ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap

@@ -442,9 +442,9 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
             $0.08
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"

ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap

@@ -282,9 +282,9 @@ exports[`<SetApprovalForAllInfo /> renders component for approve request 1`] = `
             $0.08
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"

ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/__snapshots__/edit-gas-fees-row.test.tsx.snap

@@ -73,9 +73,9 @@ exports[`<EditGasFeesRow /> renders component 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+          class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
           data-testid="selected-gas-fee-token"
-          style="cursor: default;"
+          style="cursor: default; padding-inline-end: 6px;"
         >
           <div
             class="mm-box"

ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap

@@ -68,9 +68,9 @@ exports[`<GasFeesSection /> renders component for gas fees section 1`] = `
             $0.04
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"

ui/pages/confirmations/components/confirm/info/shared/selected-gas-fee-token/selected-gas-fee-token.tsx

@@ -59,10 +59,11 @@ export function SelectedGasFeeToken() {
         borderRadius={BorderRadius.pill}
         display={Display.InlineFlex}
         alignItems={AlignItems.center}
-        paddingInline={2}
+        paddingInlineStart={1}
         gap={1}
         style={{
           cursor: hasGasFeeTokens ? 'pointer' : 'default',
+          paddingInlineEnd: '6px',
         }}
       >
         <GasFeeTokenIcon

ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-transfer.test.tsx.snap

@@ -423,9 +423,9 @@ exports[`TokenTransferInfo renders correctly 1`] = `
             $0.08
           </p>
           <div
-            class="mm-box mm-box--padding-inline-2 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+            class="mm-box mm-box--padding-inline-start-1 mm-box--display-inline-flex mm-box--gap-1 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
             data-testid="selected-gas-fee-token"
-            style="cursor: default;"
+            style="cursor: default; padding-inline-end: 6px;"
           >
             <div
               class="mm-box"