fix: info note responsive

Author: sankalpaacharya

components/ui/info-note.tsx

@@ -17,19 +17,19 @@ export function InfoNote({
   return (
     <div
       className={cn(
-        "not-prose my-8 rounded-r-lg border-l-4 border-blue-500 bg-[#0f172a] p-6 shadow-sm",
+        "not-prose my-4 rounded-r-lg border-l-2 md:border-l-4 border-blue-500 bg-[#0f172a] p-3 md:p-6 shadow-sm overflow-hidden md:my-8",
         className,
       )}
     >
-      <div className="flex items-start gap-4">
+      <div className="flex items-start gap-3 md:gap-4 min-w-0">
         <div className="mt-1 shrink-0 text-blue-500">
-          <HugeiconsIcon icon={InformationCircleIcon} size={24} />
+          <HugeiconsIcon icon={InformationCircleIcon} size={20} />
         </div>
-        <div className="flex-1 space-y-4">
-          <h4 className="text-lg font-semibold tracking-tight text-white">
+        <div className="flex-1 space-y-2 md:space-y-4 min-w-0 w-full">
+          <h4 className="text-base font-semibold tracking-tight text-white md:text-lg">
             {title}
           </h4>
-          <div className="text-[15px] leading-relaxed text-slate-300 [&_p]:leading-relaxed">
+          <div className="text-[14px] leading-relaxed text-slate-300 md:text-[15px] [&_p]:leading-relaxed [&_pre]:!m-0 [&_pre]:text-xs [&_pre]:md:text-sm [&_pre]:w-full [&_pre]:overflow-x-auto [&_pre]:max-w-full [&_pre]:box-border">
             {children}
           </div>
         </div>

content/blog/how-does-react-fiber-render-your-ui.mdx

@@ -175,7 +175,6 @@ in the browser.
 React works in time slices, constantly checking if it has time to process more units of work. Once it notices that its current `5ms` slice is up, it yields control back to the browser. The browser then takes your onClick callback from the queue and runs it.
 
 <img src="/blog/scheduler/done.svg" alt="React UI Runtime" width="800" height="100" style={{ display: 'block', margin: '2rem auto' }} />
-How Does React Fiber Render Your UI
 nside that callback is the setCount function. Internally, setCount is just a state dispatcher it tells React, _this fiber has new work that needs to be scheduled._
 
 ## Schedule