Fix/minor style fixes (#10212)

* Fix oss avatars

* Fix sponsor avatars

* Responsive nudges

apps/docs/components/Navigation/SideBar.tsx

@@ -43,7 +43,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
   return (
     <div
       className="dark:bg-scale-200 dark:border-scale-400 sidebar-width sticky top-16
-      h-screen overflow-y-scroll border-r py-8 px-6 sidebar-menu-container hidden md:block "
+      h-screen overflow-y-scroll border-r py-8 px-6 sidebar-menu-container hidden lg:block"
     >
       {isInReferencePages && (
         <>

apps/docs/components/Sponsors.tsx

@@ -43,11 +43,11 @@ export default function Sponsors() {
           !!t.transactions.length && (
             <div key={index}>
               <h4 className="font-bold">{t.heading}</h4>
-              <div className="grid sm:grid-cols-3 md:grid-cols-3 gap-6 pl-4">
+              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 pl-4">
                 {t.transactions.map((x, index) => (
                   <div className="" key={index}>
                     <a
-                      className="flex items-center gap-4 shadow-none"
+                      className="flex items-center gap-4 shadow-none shrink-0"
                       href={`https://github.com/${x.sponsor}`}
                     >
                       <Image

apps/docs/layouts/Default.tsx

@@ -49,10 +49,10 @@ const Layout: FC<Props> = ({ meta, children, toc, menuItems, currentPage }) => {
               className={`${
                 meta?.hide_table_of_contents || !hasTableOfContents
                   ? 'col-span-12 xl:col-start-2 xl:col-span-10 2xl:col-start-3 2xl:col-span-8'
-                  : 'col-span-12 md:col-span-9'
-              } py-2 md:py-4 px-2 md:px-8`}
+                  : 'col-span-12 lg:col-span-9'
+              } py-2 lg:py-4 px-2 lg:px-8 mx-auto`}
             >
-              <article className="doc-content-container prose dark:prose-dark dark:bg-scale-200 width-full mt-8 2xl:max-w-[780px] ">
+              <article className="doc-content-container prose dark:prose-dark dark:bg-scale-200 width-full mt-8 2xl:max-w-[880px] ">
                 {children}
               </article>
             </div>
@@ -60,7 +60,7 @@ const Layout: FC<Props> = ({ meta, children, toc, menuItems, currentPage }) => {
               <div
                 className={[
                   'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
-                  'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                  'thin-scrollbar overflow-y-auto sticky hidden xl:block md:col-span-3 px-2',
                 ].join(' ')}
               >
                 <TableOfContents toc={toc} />

apps/docs/pages/oss.tsx

@@ -78,7 +78,7 @@ export default function Oss({ meta }) {
               ))}
             </ul>
           </div>
-          <div className="grid sm:grid-cols-3 gap-4">
+          <div className="grid lg:grid-cols-2 gap-4">
             {maintainers
               .filter((x) => activePill == 'All' || x.tags.includes(activePill))
               .sort((a, b) => a.handle.localeCompare(b.handle))
@@ -91,11 +91,12 @@ export default function Oss({ meta }) {
                     rel="noreferrer"
                   >
                     <div className="grow bg-gray-200 dark:bg-gray-400 p-4">
-                      <div className="flex gap-4">
+                      <div className="flex gap-4 shrink-0">
                         <Image
                           className="rounded-full my-0"
-                          width={64}
-                          height={64}
+                          width={50}
+                          height={50}
+                          layout="fixed"
                           alt={x.handle}
                           src={`https://github.com/${x.handle}.png`}
                         />

apps/docs/styles/main.scss

@@ -55,7 +55,7 @@ article h1 {
 .docs-width {
   max-width: calc(100% - var(--sidebar-width));
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 1024px) {
     max-width: none;
   }
 }
@@ -188,9 +188,7 @@ pre[class*='language-'] {
 // format <code> inside <p>
 h2 code,
 h3 code,
-h4 code,
-li code,
-p code {
+h4 code {
   word-break: keep-all !important;
   white-space: nowrap !important;
   padding: 0.1rem 0.35rem !important;