fix(website): Fix docs overflow and layout issues (#4967)

firezone · May 12, 2024 · af26d07 · af26d07
1 parent e6965d6
commit af26d07
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
@@ -18,4 +18,8 @@
   *:is(h1, h2, h3, h4, h5, h6) a:hover {
     text-decoration: underline !important;
   }
+
+  :is(pre, code) {
+    @apply overflow-x-auto;
+  }
 }
diff --git a/website/src/app/kb/layout.tsx b/website/src/app/kb/layout.tsx
@@ -5,9 +5,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex">
       <KbSidebar />
-      <main className="p-4 pt-20 -ml-64 md:ml-0 lg:mx-auto">
+      <main className="p-4 pt-20 -ml-64 md:mx-auto max-w-full">
         <div className="px-4">
-          <article className="max-w-screen-md tracking-[-0.01em] format format-sm md:format-md lg:format-lg format-firezone">
+          <article className="tracking-[-0.01em] format format-sm md:format-md lg:format-lg format-firezone">
             {children}
           </article>
         </div>

diff --git a/website/src/components/Buttons/index.tsx b/website/src/components/Buttons/index.tsx
@@ -6,7 +6,7 @@ export function SignUpButton() {
     <Link href="https://app.firezone.dev/sign_up">
       <button
         type="button"
-        className="text-xs px-3 py-1.5 lg:text-sm lg:px-5 lg:py-2.5 text-white bg-accent-450 hover:bg-accent-700 font-semibold hover:font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform"
+        className="text-xs px-3 py-1.5 md:text-sm md:px-5 md:py-2.5 text-white bg-accent-450 hover:bg-accent-700 font-semibold hover:font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform"
       >
         Sign up
       </button>
@@ -19,7 +19,7 @@ export function RequestDemoButton() {
     <Link href="/contact/sales">
       <button
         type="button"
-        className="text-xs px-3 py-1.5 lg:text-sm lg:px-5 lg:py-2.5 text-primary-450 bg-white hover:bg-neutral-50 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded duration-0 hover:scale-105 transition transform"
+        className="text-xs px-3 py-1.5 md:text-sm md:px-5 md:py-2.5 text-primary-450 bg-white hover:bg-neutral-50 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded duration-0 hover:scale-105 transition transform"
       >
         Request demo
       </button>

diff --git a/website/src/components/RootNavbar/index.tsx b/website/src/components/RootNavbar/index.tsx
@@ -184,12 +184,13 @@ export default function RootNavbar() {
               aria-label="GitHub Repository"
             >
               {/* NextJS's image component has issues with shields images */}
-              <img
-                alt="Github Repo stars"
-                height={50}
-                width={100}
-                src="https://img.shields.io/github/stars/firezone/firezone"
-              />
+              <span className="md:w-24 w-16 flex">
+                <img
+                  className="grow"
+                  alt="Github Repo stars"
+                  src="https://img.shields.io/github/stars/firezone/firezone"
+                />
+              </span>
             </Link>
             <RequestDemoButton />
             <SignUpButton />