fix: allow padding for container-bordering focus outlines

Author: jamiehenson

src/components/Article/index.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent as FC } from 'react';
 import { ArticleFooter } from './ArticleFooter';
 
 const Article: FC<{ children: React.ReactNode }> = ({ children }) => (
-  <article className="flex-1 overflow-x-hidden relative z-10">
+  <article className="flex-1 overflow-x-hidden px-4 -mx-4 relative z-10">
     {children}
     <ArticleFooter />
   </article>

src/components/Layout/Layout.tsx

@@ -42,7 +42,7 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext }) => {
       <Header />
       <div className="flex pt-16 px-12 md:px-0 md:gap-12 lg:gap-16 xl:gap-20 justify-center">
         {leftSidebar ? <LeftSidebar /> : <div />}
-        <Container as="main" className={cn('flex-1', { 'overflow-x-auto': !isRedocPage })}>
+        <Container as="main" className={cn('flex-1 px-4 -mx-4', { 'overflow-x-auto': !isRedocPage })}>
           {leftSidebar ? <Breadcrumbs /> : <div />}
           {children}
           <Footer />

src/components/Layout/mdx/PageHeader.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
+import * as Tooltip from '@radix-ui/react-tooltip';
 import Icon from '@ably/ui/core/Icon';
-import { LanguageSelector } from '../LanguageSelector';
 import { track } from '@ably/ui/core/insights';
-import * as Tooltip from '@radix-ui/react-tooltip';
+import { IconName } from '@ably/ui/core/Icon/types';
+import { LanguageSelector } from '../LanguageSelector';
 import { productData } from 'src/data';
 import { languageInfo } from 'src/data/languages';
 import { useLayoutContext } from 'src/contexts/layout-context';
-import { IconName } from '@ably/ui/core/Icon/types';
 import { tooltipContentClassName } from '../utils/styles';
 
 type PageHeaderProps = {
@@ -54,7 +54,7 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ title, description }) =>
                     href={link}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex text-neutral-900 dark:text-neutral-400 cursor-pointer p-1.5"
+                    className="flex text-neutral-900 dark:text-neutral-400 cursor-pointer p-1.5 focus-base rounded-lg"
                     onClick={() => {
                       track('llm_link_clicked', {
                         model,