style updates for tabs

Author: davemooreuws

src/components/code/CodeWithTabs.tsx

@@ -45,10 +45,7 @@ export function CodeTabs(props: {
             value={tab.meta}
             className="m-0 border-t border-zinc-300/10"
           >
-            <Pre
-              highlighted={highlighted[i]}
-              showPanel={!!highlighted[i].meta}
-            />
+            <Pre highlighted={highlighted[i]} copyButtonClassName="top-12" />
           </TabsContent>
         ))}
       </Tabs>

src/components/code/CopyButton.tsx

@@ -7,9 +7,11 @@ import { ClipboardIcon } from '../icons/ClipboardIcon'
 export function CopyButton({
   code,
   showPanel,
+  className,
 }: {
   code: string
   showPanel?: boolean
+  className?: string
 }) {
   const [copyCount, setCopyCount] = useState(0)
   const copied = copyCount > 0
@@ -34,6 +36,7 @@ export function CopyButton({
           : 'bg-white/5 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',
         !showPanel &&
           'opacity-0 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100',
+        className,
       )}
       onClick={() => {
         window.navigator.clipboard.writeText(code).then(() => {

src/components/code/Pre.tsx

@@ -20,13 +20,15 @@ type Props = {
   highlighted: HighlightedCode
   showPanel?: boolean
   className?: string
+  copyButtonClassName?: string
 } & HandlerProps
 
 const Pre: React.FC<Props> = ({
   highlighted,
   showPanel,
   enableTransitions,
   className,
+  copyButtonClassName,
 }) => {
   const fileName = highlighted.meta
 
@@ -46,7 +48,11 @@ const Pre: React.FC<Props> = ({
           </span>
         </div>
       )}
-      <CopyButton code={highlighted.code} showPanel={showPanel} />
+      <CopyButton
+        code={highlighted.code}
+        showPanel={showPanel}
+        className={copyButtonClassName}
+      />
       <CodeHikePre
         code={highlighted}
         handlers={handlers}

src/components/nav/NavigationGroup.tsx

@@ -20,7 +20,7 @@ export function NavigationGroup({
 
   return (
     <li className={cn('relative mt-6', className)}>
-      <h2 className="pl-2 text-xs font-semibold text-zinc-900 dark:text-white">
+      <h2 className="pl-2 text-2xs font-semibold text-zinc-900 dark:text-white">
         {group.title}
       </h2>
       <div className="relative mt-3">