flip

src/components/Bars.tsx

@@ -200,7 +200,6 @@ export function LeftBar() {
       updateSize();
 
       const resizeObserver = new ResizeObserver((entries) => {
-        // Use requestAnimationFrame to avoid ResizeObserver loop error
         requestAnimationFrame(() => {
           actualWidth = ref?.offsetWidth || 0;
           setLeftBarSize(leftBarVisible() ? actualWidth : 0);
@@ -250,9 +249,7 @@ export function LeftBar() {
       });
     }
 
-    // Fetch data asynchronously AFTER sizing setup (non-blocking)
     const fetchData = async () => {
-      // Fetch recent posts only on client side to avoid hydration mismatch
       try {
         const posts = await api.blog.getRecentPosts.query();
         setRecentPosts(posts as any[]);
@@ -261,7 +258,6 @@ export function LeftBar() {
         setRecentPosts([]);
       }
 
-      // Fetch user info client-side only to avoid hydration mismatch
       try {
         const response = await fetch("/api/trpc/user.getProfile", {
           method: "GET"
@@ -286,33 +282,15 @@ export function LeftBar() {
       }
     };
 
-    // Defer API calls to next tick to allow initial render/sizing to complete first
     setTimeout(() => {
       fetchData();
     }, 0);
   });
 
-  // Update size when visibility changes
   createEffect(() => {
     setLeftBarSize(leftBarVisible() ? actualWidth : 0);
   });
 
-  // Auto-focus first element when sidebar opens on mobile
-  createEffect(() => {
-    const isMobile = window.innerWidth < 768;
-
-    if (leftBarVisible() && isMobile && ref) {
-      const firstFocusable = ref.querySelector(
-        "a[href], button:not([disabled]), input:not([disabled])"
-      ) as HTMLElement;
-
-      if (firstFocusable) {
-        // Small delay to ensure animation has started
-        setTimeout(() => firstFocusable.focus(), 100);
-      }
-    }
-  });
-
   return (
     <nav
       ref={ref}

src/components/blog/Card.tsx

@@ -46,12 +46,12 @@ export default function Card(props: CardProps) {
       <div class="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 bg-base absolute bottom-0 w-full border-t border-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-zinc-900 dark:bg-zinc-800">
         <div class="flex flex-col items-center justify-between md:flex-row">
           <div class="text-center md:text-left">
-            <div class="text-lg text-black md:text-xl dark:text-white">
-              {props.post.subtitle}
-            </div>
             <div class="text-2xl text-black md:text-3xl dark:text-white">
               {props.post.title.replaceAll("_", " ")}
             </div>
+            <div class="text-lg text-black md:text-xl dark:text-white">
+              {props.post.subtitle}
+            </div>
           </div>
           <div class="flex w-full justify-around pt-2 md:w-1/3 md:justify-between md:pt-0 md:pl-2">
             <div class="my-auto md:h-full">