improve the design of the tipping banner on tablet devices

[kjozwiak]

Description

As per the discussion via https://bravesoftware.slack.com/archives/C03MMJ4CHEZ/p1670530053373799, we should improve the tipping banner UX/UI on tablet devices. With the current implementation, there's a lot of wasted space which creates UX/UI isses like the one describe via #27251. You'll notice that all the buttons are spread pretty far apart or are oversized.

@brave/design-team @anatolydsgn please feel free to update the issue to add examples/designs etc..

Steps to reproduce

1. install brave that has Show close button in tipping banner brave-core#16081 (used 1.48.24 Chromium: 108.0.5359.71)
2. enable staging via Hamburger Menu -> Settings -> Developer options
3. restart the browser and enable rewards via the rewards panel (accept the ~30 BAT ads grant)
4. visit https://laurenwags.github.io and tap on the BAT icon (initiate a tip so the tipping banner is visible)

Actual result

Expected result

We should improve the general UI of the tipping banner on tablet devices to improve users experience.

Issue reproduces how often

100% reproducible when using the STR/Cases outlined above.

Version/Channel Information:

• Can you reproduce this issue with the current Play Store version? No
• Can you reproduce this issue with the current Play Store Beta version? Yes
• Can you reproduce this issue with the current Play Store Nightly version? Yes

This will be on Release once we push out the 1.46.x maintenance release.

Device details

• Install type (ARM, x86): ARM
• Device type (Phone, Tablet, Phablet): Samsung Galaxy Tab S8 Ultra (Tablet)
• Android version: Android 13

Brave version

Brave | 1.48.24 Chromium: 108.0.5359.71 (Official Build) canary (32-bit)
--- | ---
Revision | 1e0e3868ee06e91ad636a874420e3ca3ae3756ac-refs/branch-heads/5359@{#1016}
OS | Android 13; Build/TP1A.220624.014

Website problems only

• Does the issue resolve itself when disabling Brave Shields? N/A
• Does the issue resolve itself when disabling Brave Rewards? N/A
• Is the issue reproducible on the latest version of Chrome? N/A

Additional information

[anatolydsgn]

here's the solution. One of these options. https://www.figma.com/file/EDGI52tfWG1ggC9ZYFguXy/Tipping-Banner?node-id=4893%3A61656&t=KkmjzVxj3KPqhAl3-1

[Miyayes]

Let's go with:

[Miyayes]

Will be resolved by #30371.