fix MDX_EXPAND_LG and add debugging

Author: nemanjam

docs/working-notes/todo3.md

@@ -542,5 +542,6 @@ IPv6 Traefik
 pitaj plausible zasto ne radi za razlicite poddomene i domene
 text float around images on blog, home and about page 
 design system pages, typography
+js function to print image dom and src size over image for debugging, moze npm paket
 ------------
 ```

src/components/Header.astro

@@ -2,8 +2,6 @@
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
-import clsx from 'clsx';
-
 import HeaderLink from '@/components/HeaderLink.astro';
 import ThemeToggle from '@/components/ThemeToggle.astro';
 import { SELECTORS } from '@/constants/dom';
@@ -12,6 +10,7 @@ import { NAVIGATION_ITEMS } from '@/constants/navigation';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG_CLIENT } from '@/config/client';
 import { getActiveNavItemPath } from '@/utils/navigation';
+import { cn } from '@/utils/styles';
 
 import Avatar from '@/assets/images/avatar.jpg';
 
@@ -26,7 +25,7 @@ const activeNavItemPath = getActiveNavItemPath(routePathname);
 
 <header id={SCROLL_TO_TOP_ID} class="group border-b border-base-300">
   <div
-    class={clsx(
+    class={cn(
       'flex gap-2',
       'group-[.menu-open]:flex-col md:!flex-row md:justify-between md:items-center',
       'max-w-6xl py-2 px-4 md:mx-auto'

src/constants/image.ts

@@ -64,10 +64,11 @@ export const IMAGE_SIZES = {
       widths: [TW_SCREENS.XXS, TW_SCREENS.SM],
       sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, ${TW_SCREENS.SM}px`,
     },
-    // doesn't work
     MDX_EXPAND_LG: {
       widths: [TW_SCREENS.XXS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG, TW_SCREENS.XL],
-      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.LG}px) ${TW_SCREENS.LG}px, ${TW_SCREENS.XL}px`,
+      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.XL}px) ${TW_SCREENS.LG}px, ${TW_SCREENS.XL}px`,
+      // for debugging
+      // class: `border-8 border-blue-500 [@media(max-width:475px)]:!border-yellow-300 [@media(max-width:768px)]:border-orange-500 [@media(max-width:1280px)]:border-red-500`,
     },
   },
 } as const satisfies ImageSizes;