adjust styling of code block titles and make copy consistent

Author: davemooreuws

src/components/code/CodeSwitcherSelect.tsx

@@ -61,7 +61,7 @@ export function CodeSwitcherSelect({
           >
             <SelectTrigger
               aria-label="Switch code language"
-              className="absolute right-[68px] top-[6.5px] hidden h-8 w-28 bg-white/5 text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:flex"
+              className="absolute right-2 top-[3px] z-10 hidden h-8 w-28 bg-white/5 text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:flex"
             >
               <SelectValue />
             </SelectTrigger>
@@ -78,7 +78,7 @@ export function CodeSwitcherSelect({
             onChange={(e) => setCurrentLanguage(e.target.value as LanguageId)}
             className={cn(
               'flex h-8 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-              'absolute right-[72px] top-[6.5px] w-24 bg-white/5 font-sans text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:hidden',
+              'absolute right-2 top-[3px] z-10 w-24 bg-white/5 font-sans text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:hidden',
             )}
             value={selectedLang}
           >

src/components/code/CopyButton.tsx

@@ -31,12 +31,11 @@ export function CopyButton({
       type="button"
       className={cn(
         'group/button absolute right-2 h-8 rounded-md px-1.5 py-1 text-2xs font-medium backdrop-blur transition',
-        showPanel ? 'top-[6.5px]' : 'top-2.5',
+        showPanel ? 'top-12' : 'top-2.5',
         copied
           ? 'bg-primary-400/10 ring-primary-400/20'
           : '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',
+        'opacity-0 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100',
         className,
       )}
       onClick={() => {

src/components/code/Pre.tsx

@@ -44,18 +44,18 @@ const Pre: React.FC<Props> = ({
   return (
     <>
       {showFileNamePanel && (
-        <div className="flex h-12 items-center justify-start border-b border-zinc-300/10 bg-zinc-800/50 pr-12 font-display text-2xs font-semibold text-zinc-300 sm:text-xs">
+        <div className="relative flex h-10 items-center justify-start pr-12 font-display text-2xs text-zinc-300 sm:text-xs">
           {/* one-off breakpoint to hide the filename on extremely narrow screens - to avoid interfering with the lang select */}
-          <span className="hidden whitespace-nowrap px-4 py-2 min-[320px]:block">
-            {title}
-          </span>
+          <div className="relative flex h-full items-center border-r border-zinc-300/5">
+            <span className="hidden whitespace-nowrap px-4 py-2 min-[320px]:block">
+              {title}
+            </span>
+            <div className="absolute bottom-0 h-[1px] w-full bg-primary-300" />
+          </div>
+          <div className="absolute bottom-0 h-[1px] w-full bg-zinc-300/5" />
         </div>
       )}
-      <CopyButton
-        code={highlighted.code}
-        showPanel={showPanel}
-        className={copyButtonClassName}
-      />
+      <CopyButton code={highlighted.code} showPanel={showPanel} />
       <CodeHikePre
         code={highlighted}
         handlers={handlers}

src/components/tabs/Tabs.tsx

@@ -31,15 +31,15 @@ export const Tabs: React.FC<TabProps> = ({ children, value, ref, syncKey }) => {
       onValueChange={syncKey ? (value) => set(syncKey, value) : undefined}
       ref={ref}
     >
-      <TabsList className="relative mx-0 mt-auto h-12 w-full rounded-b-none bg-transparent p-0">
+      <TabsList className="relative mx-0 mb-2 mt-auto h-12 w-full rounded-b-none bg-transparent p-0">
         {tabs.map((tab) => (
           <TabsTrigger
             value={tab.props.label}
             key={tab.props.label}
             className="group/tab relative h-12 data-[state=active]:bg-transparent data-[state=active]:text-primary dark:hover:text-zinc-200 dark:data-[state=active]:text-primary-300"
           >
             {tab.props.label}
-            <div className="absolute inset-x-2 bottom-0 h-px bg-primary opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100 dark:bg-primary-300" />
+            <div className="absolute inset-x-0 bottom-0 h-px bg-primary opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100 dark:bg-primary-300" />
           </TabsTrigger>
         ))}
         <div className="absolute inset-x-0 bottom-0 h-px bg-zinc-300/10" />