Merge pull request #212 from kallebysantos/ui-fixes

website UI fixes

Author: saltcod

website/components/layouts/Navbar.tsx

@@ -100,64 +100,67 @@ const Navbar = () => {
 
         <div className="flex items-center justify-end gap-2 sm:gap-6 sm:min-w-[160px]">
           <div className="flex items-center ml-1 sm:ml-4">
+            <Button variant="link" asChild>
+              <Link href="https://supabase.github.io/dbdev/" target="blank">
+                Docs
+              </Link>
+            </Button>
+
             {user ? (
-              <DropdownMenu>
-                <DropdownMenuTrigger>
-                  <AvatarWrapper size="md" />
-                </DropdownMenuTrigger>
-
-                <DropdownMenuContent>
-                  <DropdownMenuLabel>Logged in as</DropdownMenuLabel>
-                  <DropdownMenuItem asChild>
-                    <Link
-                      href={`/${user?.user_metadata.handle}`}
-                      className="flex items-center cursor-pointer"
-                    >
-                      {displayName}
-                    </Link>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem asChild>
-                    <Link
-                      href={`/${user?.user_metadata.handle}/_/access-tokens`}
-                      className="flex items-center cursor-pointer"
-                    >
-                      Access Tokens
-                    </Link>
-                  </DropdownMenuItem>
-
-                  {isOrganizationsSuccess && organizations.length > 0 && (
-                    <DropdownMenuLabel>Organizations</DropdownMenuLabel>
-                  )}
-                  {isOrganizationsSuccess &&
-                    organizations.map((org) => (
-                      <DropdownMenuItem key={org.id} asChild>
-                        <Link
-                          href={`/${org.handle}`}
-                          className="cursor-pointer"
-                        >
-                          {org.display_name} ({org.handle})
-                        </Link>
-                      </DropdownMenuItem>
-                    ))}
-
-                  <DropdownMenuItem asChild>
-                    <button
-                      onClick={handleSignOut}
-                      className="w-full cursor-pointer"
-                    >
-                      Sign out
-                    </button>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <div className="flex items-center ml-1 sm:ml-4">
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <AvatarWrapper size="md" />
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent>
+                    <DropdownMenuLabel>Logged in as</DropdownMenuLabel>
+                    <DropdownMenuItem asChild>
+                      <Link
+                        href={`/${user?.user_metadata.handle}`}
+                        className="flex items-center cursor-pointer"
+                      >
+                        {displayName}
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem asChild>
+                      <Link
+                        href={`/${user?.user_metadata.handle}/_/access-tokens`}
+                        className="flex items-center cursor-pointer"
+                      >
+                        Access Tokens
+                      </Link>
+                    </DropdownMenuItem>
+
+                    {isOrganizationsSuccess && organizations.length > 0 && (
+                      <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+                    )}
+                    {isOrganizationsSuccess &&
+                      organizations.map((org) => (
+                        <DropdownMenuItem key={org.id} asChild>
+                          <Link
+                            href={`/${org.handle}`}
+                            className="cursor-pointer"
+                          >
+                            {org.display_name} ({org.handle})
+                          </Link>
+                        </DropdownMenuItem>
+                      ))}
+
+                    <DropdownMenuItem asChild>
+                      <button
+                        onClick={handleSignOut}
+                        className="w-full cursor-pointer"
+                      >
+                        Sign out
+                      </button>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             ) : (
-              <div className="flex items-center ">
-                <Button variant="link" asChild>
-                  <Link href="https://supabase.github.io/dbdev/" target="blank">
-                    Docs
-                  </Link>
-                </Button>
+              <div className="flex items-center">
                 <Button variant="link" asChild>
                   <Link href="/sign-in">Login</Link>
                 </Button>

website/pages/index.tsx

@@ -6,15 +6,14 @@ import Layout from '~/components/layouts/Layout'
 import PackageCard from '~/components/packages/PackageCard'
 
 import CopyButton from '~/components/ui/CopyButton'
-import Markdown from '~/components/ui/Markdown'
 import { Button } from '~/components/ui/Button'
 import {
   prefetchPopularPackages,
   usePopularPackagesQuery,
 } from '~/data/packages/popular-packages-query'
 import { NextPageWithLayout } from '~/lib/types'
 
-const IndexPage: NextPageWithLayout = ({}) => {
+const IndexPage: NextPageWithLayout = () => {
   const { data } = usePopularPackagesQuery()
 
   return (
@@ -56,16 +55,16 @@ const IndexPage: NextPageWithLayout = ({}) => {
           </div>
         </div>
         <div className="mt-4 md:mt-12 lg:-mt-16 lg:flex-shrink-0 md:text-center lg:text-left">
-          <div className="relative border inline-block px-4 pt-4 pb-4 md:pb-24 rounded-md justify-end">
-            <div className="inline-block">
+          <div className="relative border px-4 pt-4 pb-4 md:pb-24 rounded-md justify-end">
+            <div>
               <div>
                 <h3 className="text-lg font-bold">Download and install</h3>
                 <p className="text-xs text-muted-foreground">
                   Install extensions via a SQL command
                 </p>
               </div>
               <div className="mt-4 relative">
-                <code>
+                <code className="block md:inline overflow-scroll py-2">
                   <span className="text-muted-foreground">
                     select dbdev.install(
                   </span>