fix(docs): add horizontal padding to navbar and main content

website/src/components/Container.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import cn from 'classnames';
+import { HTMLProps } from 'react';
 
-export interface ContainerProps {}
+export type ContainerProps = HTMLProps<HTMLDivElement>;
 
-export const Container: React.FC<ContainerProps> = props => {
-  return <div className={cn('container mx-auto')} {...props} />;
+export const Container: React.FC<ContainerProps> = ({ className, ...props }) => {
+  return <div className={cn('container mx-auto', className)} {...props} />;
 };
 
 Container.displayName = 'Container';

website/src/components/SidebarMobile.tsx

@@ -49,7 +49,7 @@ export function SidebarMobile({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="lg:hidden">
-      <Container>
+      <Container className="px-4">
         <div className="sidebar-search py-2 z-10">
           <Search />
         </div>
@@ -67,7 +67,7 @@ export function SidebarMobile({ children }: { children: React.ReactNode }) {
           </div>
         </label>
         <div className="docs-dropdown shadow-xl" ref={menuRef}>
-          <Container>
+          <Container className="px-4">
             <nav>{children}</nav>
           </Container>
         </div>

website/src/pages/docs/[...slug].tsx

@@ -108,7 +108,7 @@ export default function Docs({ page, routes, route: _route }: DocsProps) {
                   </SidebarMobile>
                 </Sticky>
 
-                <div className="container mx-auto pb-12 pt-6 content">
+                <div className="container mx-auto pb-12 pt-6 px-4 content">
                   <div className="flex relative">
                     <Sidebar fixed>
                       <SidebarRoutes routes={routes} />