fix edge-case layout bug

This commit is contained in:
June 2025-08-13 23:59:48 +12:00 committed by June
parent e487637600
commit 672191cc5b

View File

@ -29,7 +29,7 @@ const ingredients = await Promise.all(
<SiteLayout> <SiteLayout>
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2"> <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex flex-col mt-2 md:mt-4 sticky"> <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<ImageCarousel class="w-full" recipe={re} /> <ImageCarousel class="w-full" recipe={re} />
<p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p> <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
@ -40,7 +40,7 @@ const ingredients = await Promise.all(
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} /> <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
</div> </div>
<div class="flex w-full flex-col"> <div class="flex md:flex-2/3 w-full flex-col">
<p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p> <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
<!-- Steps --> <!-- Steps -->