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):
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