fix: prevent flex icon shrink

Author: Ehesp

website-v3/src/components/PreviousNext.astro

@@ -46,7 +46,7 @@ if (automaticallyInferNextPrevious) {
             href={previous[1]}
             className="group inline-flex items-center gap-2 opacity-75 transition hover:opacity-100"
           >
-            <span class="group-hover:text-docs-theme h-4 w-4 transition">
+            <span class="group-hover:text-docs-theme h-4 w-4 flex-shrink-0 transition">
               <ChevronLeftIcon />
             </span>
             <span>{previous[0]}</span>
@@ -57,10 +57,10 @@ if (automaticallyInferNextPrevious) {
         {!!next && (
           <Link
             href={next[1]}
-            className="group inline-flex items-center gap-2 opacity-75 transition hover:opacity-100"
+            className="group inline-flex items-center gap-2 opacity-75 transition hover:opacity-100 text-right"
           >
             <span>{next[0]}</span>
-            <span class="group-hover:text-docs-theme h-4 w-4 transition">
+            <span class="group-hover:text-docs-theme h-4 w-4 flex-shrink-0 transition">
               <ChevronRightIcon />
             </span>
           </Link>

website-v3/src/components/mdx/callouts.tsx

@@ -16,11 +16,11 @@ const Callout: React.FC<Props> = props => {
   return (
     <div
       className={cx(
-        'mb-3 flex items-center gap-2 overflow-hidden rounded-xl px-5 py-4 text-sm',
+        'mb-3 flex items-center gap-4 overflow-hidden rounded-xl px-5 py-4 text-sm',
         props.className,
       )}
     >
-      <span className="h-6 w-6">{props.icon}</span>
+      <span className="h-6 w-6 flex-shrink-0">{props.icon}</span>
       <span className="[&>p]:m-0">{props.children}</span>
     </div>
   );