Feature/cor 1760 spacing text and arrow components (#4840)

* feat(COR-1760): add the spacing between arrow and the text.

* feat(COR-1760): adding space between arrow and acordian

* feat(COR-1760): change spacing to 64px.

* feat(COR-1760):change styling in through the button css.

* feat(COR-1760): getting rid of magic number

* feat(COR-1760):remove class tag and add minor adjustment for breakpoints.

* feat(COR-1760): switching to a flexbox implementation for consistency.

* feat(COR-1760): remove access margin.

* feat(COR-1760): change div to box.

* feat(COR-1760): add gap only to md breakpoint.

* feat(COR-1760): remove gap for only the md break point

packages/app/src/components/collapsible/collapsible-section.tsx

@@ -64,7 +64,7 @@ export const CollapsibleSection = ({
   return (
     <Box as="section" borderTop={hideBorder ? undefined : `1px solid ${borderColor}`} id={id} ref={section} className={`${className} ${collapsible.isOpen ? 'open' : ''}`}>
       <Summary color={textColor} onClick={() => collapsible.toggle()} fontSize={fontSize}>
-        <Box width="100%" position="relative">
+        <Box width="100%" position="relative" pr={space[5]}>
           {summary}
           {id && (
             <StyledAnchor aria-hidden="true" tabIndex={-1} onClick={(event) => event.stopPropagation()} href={`#${id}`}>

packages/app/src/components/page-information-block/page-information-block.tsx

@@ -110,17 +110,21 @@ export function PageInformationBlock({
               <Box flex="1" display="flex" flexDirection="column" spacing={3}>
                 {pageInformationHeader.dataExplained && (
                   <PageInformationButton href={pageInformationHeader.dataExplained.link}>
-                    <BoldText>{pageInformationHeader.dataExplained.button.header}</BoldText>
-                    <RichContent blocks={pageInformationHeader.dataExplained.button.text} />
+                    <Box>
+                      <BoldText>{pageInformationHeader.dataExplained.button.header}</BoldText>
+                      <RichContent blocks={pageInformationHeader.dataExplained.button.text} />
+                    </Box>
 
                     <ChevronRight />
                   </PageInformationButton>
                 )}
 
                 {pageInformationHeader.faq && (
                   <PageInformationButton href={`#${pageInformationHeader.faq.link}`}>
-                    <BoldText>{pageInformationHeader.faq.button.header}</BoldText>
-                    <RichContent blocks={pageInformationHeader.faq.button.text} />
+                    <Box>
+                      <BoldText>{pageInformationHeader.faq.button.header}</BoldText>
+                      <RichContent blocks={pageInformationHeader.faq.button.text} />
+                    </Box>
 
                     <ChevronDown />
                   </PageInformationButton>
@@ -188,16 +192,15 @@ const PageInformationButton = styled(Anchor)`
   color: ${colors.black};
   cursor: pointer;
   padding: ${space[3]} ${space[4]};
-  position: relative;
   text-align: left;
+  display: flex;
+  justify-content: space-between;
+  gap: ${space[4]};
 
   svg {
     color: ${colors.primary};
-    position: absolute;
-    right: ${space[2]};
-    top: 50%;
-    transform: translate(-50%, -50%);
     width: 24px;
+    flex-shrink: 0;
   }
 
   .underline {