+2 -2

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 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 */} 42 42 <div 43 43 - className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4" 43 43 + className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4 pwa-padding" 44 44 id="page-carousel" 45 45 > 46 46 <Pages rootPage={props.leaflet_id} />

+7

app/globals.css

··· 240 240 z-index: 0; 241 241 } 242 242 } 243 243 + 244 244 + .pwa-padding { 245 245 + padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important; 246 246 + } 247 247 + .pwa-padding-bottom { 248 248 + padding-bottom: max(calc(env(safe-area-inset-bottom) - 14px), 8px); 249 249 + }

+1 -1

app/home/LoggedOutWarning.tsx

··· 10 10 className={` 11 11 homeWarning z-10 shrink-0 12 12 bg-bg-page rounded-md 13 13 - absolute bottom-14 left-2 right-2 13 13 + absolute bottom-16 left-2 right-2 14 14 sm:static sm:mr-1 sm:ml-6 sm:mt-6 border border-border-light`} 15 15 > 16 16 <div className="px-2 py-1 text-sm text-tertiary flex sm:flex-row flex-col sm:gap-4 gap-1 items-center sm:justify-between">

+8 -2

app/home/page.tsx

··· 99 99 set={permission_token.permission_token_rights[0].entity_set} 100 100 > 101 101 <ThemeProvider entityID={root_entity}> 102 102 - <div className="flex h-full bg-bg-leaflet"> 102 102 + <div className="flex h-full bg-bg-leaflet pwa-padding"> 103 103 <ThemeBackgroundProvider entityID={root_entity}> 104 104 <div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row sm:items-stretch flex-col-reverse px-2 sm:px-6 "> 105 105 {!auth_res && ( ··· 107 107 <LoggedOutWarning /> 108 108 </div> 109 109 )} 110 110 - <div className="homeOptions z-10 shrink-0 sm:static absolute bottom-0 left-0 right-0 place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse sm:w-fit w-full items-center px-2 sm:px-0 pb-2 pt-2 sm:pt-7 sm:bg-transparent bg-bg-page border-border border-t sm:border-none"> 110 110 + <div 111 111 + className={`homeOptions z-10 shrink-0 112 112 + sm:static absolute bottom-0 left-0 right-0 113 113 + place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse sm:w-fit w-full items-center 114 114 + px-2 sm:px-0 pwa-padding-bottom pt-2 sm:pt-7 sm:bg-transparent 115 115 + bg-bg-page border-border border-t sm:border-none`} 116 116 + > 111 117 <div className="flex sm:flex-col flex-row-reverse gap-2 shrink-0 place-self-end"> 112 118 <CreateNewLeafletButton /> 113 119 <ThemePopover entityID={root_entity} home />

+1

app/layout.tsx

··· 29 29 }; 30 30 31 31 export const viewport = { 32 32 + themeColor: "#ffffff", 32 33 minimumScale: 1, 33 34 initialScale: 1, 34 35 maximumScale: 1,

+2 -2

components/MobileFooter.tsx

··· 14 14 let entity_set = useEntitySetContext(); 15 15 16 16 return ( 17 17 - <Media mobile className="mobileFooter w-full z-10 touch-none -mt-4"> 17 17 + <Media mobile className="mobileFooter w-full z-10 touch-none -mt-4 "> 18 18 {focusedBlock && 19 19 focusedBlock.entityType == "block" && 20 20 entity_set.permissions.write ? ( ··· 30 30 /> 31 31 </div> 32 32 ) : entity_set.permissions.write ? ( 33 33 - <div className="z-10 pb-2 px-2 pt-0.5 flex justify-between"> 33 33 + <div className="z-10 pwa-padding-bottom px-2 pt-0.5 flex justify-between"> 34 34 <div className="flex flex-row gap-[6px]"> 35 35 <HomeButton /> 36 36 </div>

+4 -1

components/ThemeManager/ThemeProvider.tsx

··· 76 76 if (!el) return; 77 77 setCSSVariableToColor(el, "--bg-leaflet", bgLeaflet); 78 78 setCSSVariableToColor(el, "--bg-page", bgPage); 79 79 + document 80 80 + .querySelector('meta[name="theme-color"]') 81 81 + ?.setAttribute("content", `rgb(${colorToString(bgLeaflet, "rgb")})`); 79 82 el?.style.setProperty( 80 83 "--bg-page-alpha", 81 84 bgPage.getChannelValue("alpha").toString(), ··· 122 125 ]); 123 126 return ( 124 127 <div 125 125 - className="leafletWrapper w-full text-primary h-full flex flex-col bg-center items-stretch" 128 128 + className="leafletWrapper w-full text-primary h-full flex flex-col bg-center items-stretch " 126 129 style={ 127 130 { 128 131 "--bg-leaflet": colorToString(bgLeaflet, "rgb"),

+7 -1

components/ViewportSizeLayout.tsx

··· 6 6 let viewheight = useViewportSize().height; 7 7 let difference = useViewportDifference(); 8 8 return ( 9 9 - <div style={{ height: isIOS() ? viewheight : "100%" }}> 9 9 + <div 10 10 + style={{ 11 11 + height: isIOS() 12 12 + ? `calc(${viewheight}px + env(safe-area-inset-top)` 13 13 + : "calc(100% + env(safe-area-inset-top)", 14 14 + }} 15 15 + > 10 16 {props.children} 11 17 </div> 12 18 );