From 554c40c5cca4e3f4e52220431aeacb6ec057202c Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 9 Nov 2022 10:54:56 -0330
Subject: [PATCH] Fix/minor style fixes (#10212)

* Fix oss avatars

* Fix sponsor avatars

* Responsive nudges
---
 apps/docs/components/Navigation/SideBar.tsx | 2 +-
 apps/docs/components/Sponsors.tsx           | 4 ++--
 apps/docs/layouts/Default.tsx               | 8 ++++----
 apps/docs/pages/oss.tsx                     | 9 +++++----
 apps/docs/styles/main.scss                  | 6 ++----
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx
index 0d90254a9ba..d6ffa3473b9 100644
--- a/apps/docs/components/Navigation/SideBar.tsx
+++ b/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 && (
         <>
diff --git a/apps/docs/components/Sponsors.tsx b/apps/docs/components/Sponsors.tsx
index dba5ec3ae86..f6203f69201 100644
--- a/apps/docs/components/Sponsors.tsx
+++ b/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
diff --git a/apps/docs/layouts/Default.tsx b/apps/docs/layouts/Default.tsx
index 9ce6310fa3f..7b7f4755b92 100644
--- a/apps/docs/layouts/Default.tsx
+++ b/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} />
diff --git a/apps/docs/pages/oss.tsx b/apps/docs/pages/oss.tsx
index ac5177739fb..95d8879e25c 100644
--- a/apps/docs/pages/oss.tsx
+++ b/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`}
                         />
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index 39461ac62b2..1f21e59bedb 100644
--- a/apps/docs/styles/main.scss
+++ b/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;