scroll fix on login for webkit

diff --git a/Dockerfile b/Dockerfile
index 6101784741ac926335231f09c2da43292784a9d4..0d988c85dc494daf7e0b1477fb14987b6959278f 100644 (file)
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,7 +7,6 @@ WORKDIR /app/frontend
 # Install dependencies and build SvelteKit (adapter-static outputs to build/)
 COPY frontend/package*.json ./
 RUN apk update && apk add build-base cairo-dev pango-dev giflib-dev g++ make py3-pip && npm ci
-#RUN apk add g++ make py3-pip && npm ci || npm install
 COPY frontend/ ./
 RUN npm run build
 RUN npm prune --production

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index ca8f0f1270ccbf9517ec8f25d8b93b4f02f7fa98..fb567afeaaaf1d7d48106f23a3d29793cbb81889 100644 (file)
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -1153,6 +1153,7 @@
                                        <img src={dailytxt} alt="" height="38px" />
                                        <span class="dailytxt ms-2 user-select-none">DailyTxT</span>
                                </div>
+                               1
                        </div>
 
                        <div class="col-lg-4 col-sm-5 col pe-0 d-flex flex-row justify-content-end">

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 9090e38de1fdd2ae018bb7530a0f4c49ea19d26f..480bef2ad70fefb1b6c9e88bb0a4cda51013ce22 100644 (file)
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -12,7 +12,6 @@
        import { FormatIcu } from '@tolgee/format-icu';
        import { darkMode } from '$lib/settingsStore.js';
        import { registerSW } from 'virtual:pwa-register';
-       import { base } from '$app/paths';
 
        const tolgee = Tolgee()
                .use(DevTools())
@@ -192,14 +191,14 @@
                                        aria-atomic="true"
                                >
                                        <div class="d-flex align-items-center">
-                                               <div class="toast-body">Install DailyTxT for a better app-like experience.</div>
+                                               <div class="toast-body">{tolgee.t('toast.pwa.install_description')}</div>
                                                <button
                                                        id="btnPwaInstall"
                                                        type="button"
                                                        class="btn btn-light btn-sm me-2 m-2"
                                                        onclick={installPWA}
                                                >
-                                                       Install
+                                                       {tolgee.t('toast.pwa.install_button')}
                                                </button>
                                                <button
                                                        type="button"
@@ -219,9 +218,9 @@
                                aria-atomic="true"
                        >
                                <div class="d-flex align-items-center">
-                                       <div class="toast-body">A new version is available.</div>
+                                       <div class="toast-body">{tolgee.t('toast.pwa.update_available')}</div>
                                        <button id="btnPwaReload" type="button" class="btn btn-light btn-sm me-2 m-2">
-                                               Reload
+                                               {tolgee.t('toast.pwa.reload_button')}
                                        </button>
                                        <button
                                                type="button"

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 645d30f184f1dcb271c4704b882770abf4595794..17d82b17bcdb5da7aafff1620234632c08c13759 100644 (file)
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -577,7 +577,7 @@
 
        <div class="language-select-wrapper">
                <div class="input-group mb-3">
-                       <span class="input-group-text" id="basic-addon1">🌐</span>
+                       <span class="input-group-text user-select-none" id="basic-addon1">🌐</span>
                        <select
                                class="form-select"
                                bind:value={selectedLanguage}
@@ -712,7 +712,6 @@
 
        .login-wrapper {
                width: 50%;
-               /* z-index: 10; */
                height: 100%;
                display: flex;
                flex-direction: column;
@@ -739,6 +738,7 @@
                justify-content: center;
                align-items: center;
                overflow-y: hidden;
+               min-height: 100vh;
        }
 
        @media screen and (min-width: 769px) and (max-width: 1000px) {
@@ -752,12 +752,17 @@
                        flex-direction: column !important;
                        justify-content: inherit;
                        overflow-y: auto;
+                       -webkit-overflow-scrolling: touch;
+                       height: 100dvh;
+                       min-height: 100vh;
+                       touch-action: pan-y;
+                       overscroll-behavior-y: contain;
                }
 
                .login-wrapper {
                        min-width: 50%;
                        max-width: 75%;
-                       overflow-y: clip;
+                       overflow-y: visible;
                        height: auto;
                        margin-top: 3rem;
                        margin-bottom: 3rem;