Mobile styling fixes #6

-1

app/components/Nav/HorizontalNav.vue

reviewed

··· 23 23 floating:shadow-2xl 24 24 25 25 pwa:bottom-12 26 26 - pwa:bg-transparent 27 26 28 27 floating:pwa:bottom-6 29 28 "

+1 -1

app/components/Todo/Todos.vue

reviewed

··· 18 18 <template> 19 19 <div class="flex justify-center" data-testid="todos-container"> 20 20 <div 21 21 - class="max-h-[calc(100dvh-5.75rem)] w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1" 21 21 + class="max-h-[calc(100dvh-5.75rem)] pwa:max-h-[calc(100dvh-8.75rem)] floating:max-h-[calc(100dvh-8.75rem)] w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1" 22 22 > 23 23 <TransitionGroup 24 24 leave-to-class="max-h-0! opacity-0 scale-y-0"

+1 -1

app/composables/useIsPwa.ts

reviewed

··· 10 10 onMounted(() => { 11 11 isPwa.value = 12 12 window.matchMedia("(display-mode: standalone)").matches || 13 13 - (window.navigator as NavigatorStandalone).standalone === true; 13 13 + (window.navigator as NavigatorStandalone).standalone!; 14 14 }); 15 15 16 16 return isPwa;

+6 -3

app/composables/useSettings.ts

reviewed

··· 4 4 }; 5 5 6 6 export function useSettings() { 7 7 - const settings = useLocalStorage<Settings>("settings", { 8 8 - insertionPoint: "bottom", 9 9 - design: "classic", 7 7 + const settings = useCookie<Settings>("settings", { 8 8 + default: () => ({ 9 9 + insertionPoint: "bottom", 10 10 + design: "classic", 11 11 + }), 10 12 }); 13 13 + 11 14 return { settings }; 12 15 }

+8 -1

app/pages/index.vue

reviewed

··· 39 39 40 40 const isPwa = useIsPwa(); 41 41 const { settings } = useSettings(); 42 42 + 43 43 + useHead({ 44 44 + htmlAttrs: { 45 45 + "data-design": computed(() => settings.value.design), 46 46 + "data-pwa": computed(() => isPwa.value), 47 47 + }, 48 48 + }); 42 49 </script> 43 50 <template> 44 44 - <div :data-design="settings.design" :data-pwa="isPwa"> 51 51 + <div> 45 52 <FilterSheet v-model:is-open="isFilterSheetOpen" /> 46 53 <SettingsSheet v-model:is-open="isSettingsSheetOpen" /> 47 54 <EditTodoSheet />