Billing: Improvements on chart columns and subtitles

Description

PRDE - Story default text according to the team DoR (Definition of Ready)

01 - PERSON OF CONTACT (PERSON THAT CAN ANSWER QUESTIONS ABOUT THE PROBLEM):
02 - STORY BRIEFING (AS A < PERSONA >, I [WANT TO] < NEED >, [SO THAT] < GOAL >):
03 - PROBLEM (WHAT'S THE CURRENT PROBLEM SCENARIO OR PAIN TO BE RESOLVED?):

We don’t have a gutter size so when we display too many columns they aggregate, making it hard to understand the chart

The current behavior of hovering the subtitles is to make the text bold, but it causes the subtitles to increase their sizes and therefore moving

04 - GOAL (DESCRIBE THE PROPOSED SOLUTION):

Create gutter spacing and set a maximum width to the columns to improve user experience

Change hover behavior to maintain subtitles in place

05 - WHO CAN USE THIS FEATURE (USER ROLES):
06 - ACTIVITY DIAGRAM (ACTIVITY DIAGRAM LINK AND IMAGE):
07 - STEPS (ACTIONS TO BE PERFORMED LINKING TO SCREENSHOTS):
08 - ALTERNATIVE STEPS:
09 - ASSETS (FIGMA LINKS, RELEVANT DOCUMENTATION LINKS, JSON EXAMPLES, ETC):

https://www.figma.com/file/FiL1iRG6RPjuNCgVzgGqvaZ3/%F0%9F%9F%A3-Carol-3.0?type=design&node-id=30978-197979&mode=design&t=DRQ3I9rexgfmOB8X-4

Maximun column with: 72px / 9rem

Hover subtitles: Apply background neutrals-grey-8

Min gutter size (between columns): 4px / 0.5rem

10 - ACCEPTANCE CRITERIA:

Set min gutter size and max width size for columns