+3 -1

app/[leaflet_id]/Leaflet.tsx

··· 37 37 <UpdateLeafletTitle entityID={props.leaflet_id} /> 38 38 <AddLeafletToHomepage /> 39 39 <SelectionManager /> 40 40 + {/* we need the padding bottom here because if we don't have it the mobile footer will cut off 41 41 + the dropshadow on the page... the padding is compensated by a negative top margin in mobile footer */} 40 42 <div 41 41 - className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full" 43 43 + className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4" 42 44 id="page-carousel" 43 45 > 44 46 <Pages rootPage={props.leaflet_id} />

+4 -2

components/Blocks/Block.tsx

··· 18 18 import { CheckboxChecked, CheckboxEmpty } from "components/Icons"; 19 19 import { AreYouSure } from "./DeleteBlock"; 20 20 import { useEntitySetContext } from "components/EntitySetProvider"; 21 21 + import { useIsMobile } from "src/hooks/isMobile"; 21 22 22 23 export type Block = { 23 24 factID: string; ··· 190 191 className?: string; 191 192 }, 192 193 ) => { 194 194 + let isMobile = useIsMobile(); 193 195 let checklist = useEntity(props.value, "block/check-list"); 194 196 let headingLevel = useEntity(props.value, "block/heading-level")?.data.value; 195 197 let children = useEntity(props.value, "card/block"); ··· 217 219 style={{ 218 220 width: 219 221 depth && 220 220 - `calc(${depth} * ${`var(--list-marker-width) ${checklist ? " + 20px" : ""} - 12px)`} `, 222 222 + `calc(${depth} * ${`var(--list-marker-width) ${checklist ? " + 20px" : ""} - ${isMobile ? "6px" : "12px"})`} `, 221 223 }} 222 224 > 223 225 <button ··· 232 234 ${ 233 235 folded 234 236 ? "outline-secondary" 235 235 - : ` ${children.length > 0 ? "group-hover/list-marker:outline-secondary outline-transparent" : "outline-transparent"}` 237 237 + : ` ${children.length > 0 ? "sm:group-hover/list-marker:outline-secondary outline-transparent" : "outline-transparent"}` 236 238 }`} 237 239 /> 238 240 </button>

+4 -4

components/MobileFooter.tsx

··· 15 15 let entity_set = useEntitySetContext(); 16 16 17 17 return ( 18 18 - <Media mobile className="mobileFooter w-full z-10 touch-none"> 18 18 + <Media mobile className="mobileFooter w-full z-10 touch-none -mt-4"> 19 19 {focusedBlock && 20 20 focusedBlock.entityType == "block" && 21 21 entity_set.permissions.write ? ( 22 22 <div 23 23 - className="w-full z-10 p-2 flex bg-bg-page " 23 23 + className="w-full z-10 p-2 flex bg-bg-page" 24 24 onMouseDown={(e) => { 25 25 if (e.currentTarget === e.target) e.preventDefault(); 26 26 }} ··· 31 31 /> 32 32 </div> 33 33 ) : entity_set.permissions.write ? ( 34 34 - <div className="z-10 pb-2 px-2 flex justify-between"> 34 34 + <div className="z-10 pb-2 px-2 pt-0.5 flex justify-between"> 35 35 <HomeButton /> 36 36 <div className="flex flex-row gap-[6px] items-center "> 37 37 <HelpPopover /> ··· 41 41 </div> 42 42 </div> 43 43 ) : ( 44 44 - <div className="pb-2 px-2 z-10 place-self-end"> 44 44 + <div className="pb-2 px-2 z-10 justify-end place-self-end"> 45 45 <Watermark mobile /> 46 46 </div> 47 47 )}

+4 -4

components/Watermark.tsx

··· 8 8 let showWatermark = useEntity(rootEntity, "theme/page-leaflet-watermark"); 9 9 if (!showWatermark?.data.value) return null; 10 10 return ( 11 11 - <Link href="/" className="hover:no-underline"> 11 11 + <Link href="/" className="hover:no-underline w-fit italic"> 12 12 <div className="sm:mb-2 sm:mr-4 group/watermark flex sm:flex-col gap-2 items-center justify-center "> 13 13 <div 14 14 - className="hidden group-hover/watermark:block sm:rotate-180 sm:py-1 sm:px-0 px-1 w-max rounded-md h-fit whitespace-nowrap text-sm text-tertiary" 14 14 + className="sm:hidden group-hover/watermark:block sm:rotate-180 sm:py-1 sm:px-0 px-1 w-max rounded-md h-fit whitespace-nowrap text-sm text-tertiary" 15 15 style={{ 16 16 writingMode: !props.mobile ? "vertical-lr" : "horizontal-tb", 17 17 - backgroundColor: "rgba(var(--bg-page), 0.6)", 17 17 + backgroundColor: "rgba(var(--bg-page), 0.7)", 18 18 }} 19 19 > 20 20 made using <span className="text-accent-1">Leaflet</span> 21 21 </div> 22 22 <LogoSmall 23 23 strokeColor={theme.colors["bg-page"]} 24 24 - className="text-tertiary group-hover/watermark:text-accent-1" 24 24 + className="text-accent-1 sm:text-tertiary group-hover/watermark:text-accent-1" 25 25 /> 26 26 </div> 27 27 </Link>