smaller padding and vertical height

components/Breadcrumb.tsx

@@ -7,7 +7,7 @@ const HomeCrumb = () => {
   return (
     <Link href="/">
       <a>
-        <FontAwesomeIcon className="h-4 w-4" icon={['far', 'flag']} />
+        <FontAwesomeIcon className="h-3 w-3" icon={['far', 'flag']} />
         <span className="ml-2 font-medium">Home</span>
       </a>
     </Link>
@@ -27,7 +27,7 @@ const Breadcrumb: React.FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
             .reverse()
             .map((p: string, i: number) => (
               <li key={i} className="flex flex-shrink-0 items-center">
-                <FontAwesomeIcon icon="angle-right" />
+                <FontAwesomeIcon className="h-3 w-3" icon="angle-right" />
                 <Link
                   href={`/${path
                     .slice(0, path.length - i)

components/SwitchLayout.tsx

@@ -16,7 +16,7 @@ export const SwitchLayout = () => {
   return (
     <div className="w-24 flex-shrink-0 text-sm text-gray-600 dark:text-gray-300 md:w-28">
       <Listbox value={preferredLayout} onChange={setPreferredLayout}>
-        <Listbox.Button className="relative w-full cursor-pointer rounded py-1.5 pl-2">
+        <Listbox.Button className="relative w-full cursor-pointer rounded pl-2">
           <span className="pointer-events-none flex items-center">
             <FontAwesomeIcon className="mr-2 h-4 w-4" icon={preferredLayout.icon} />
             <span>{preferredLayout.name}</span>