mobile adjustments for lang select and padding

Author: davemooreuws

src/components/code/CodeSwitcherSelect.tsx

@@ -61,7 +61,7 @@ export function CodeSwitcherSelect({
           >
             <SelectTrigger
               aria-label="Switch code language"
-              className="absolute right-20 top-[6.5px] hidden h-8 w-[120px] 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-[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"
             >
               <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-20 top-[6.5px] w-[120px] 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-[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',
             )}
             value={selectedLang}
           >

src/components/code/Pre.tsx

@@ -44,7 +44,7 @@ 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-xs font-semibold text-zinc-300">
+        <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">
           {/* 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">
             {fileName}

src/components/layout/BaseLayout.tsx

@@ -19,7 +19,7 @@ export function BaseLayout({ children }: React.PropsWithChildren) {
           <Navigation className="hidden lg:block" />
         </div>
       </header>
-      <div className="relative px-4 pt-14 sm:px-6 lg:px-8">
+      <div className="relative px-2 pt-14 sm:px-6 lg:px-8">
         {children}
         <Footer />
       </div>