diff --git a/src/components/ClusterHList.vue b/src/components/ClusterHList.vue index de62ed4d..3fec2926 100644 --- a/src/components/ClusterHList.vue +++ b/src/components/ClusterHList.vue @@ -53,12 +53,13 @@ export default defineComponent({ display: flex; > .name { - font-size: 18px; + font-size: 1.1em; flex-grow: 1; } > .action { :deep a { + font-size: 0.9em; color: var(--color-primary); } } diff --git a/src/components/Explore.vue b/src/components/Explore.vue index d433eab8..688ed77c 100644 --- a/src/components/Explore.vue +++ b/src/components/Explore.vue @@ -176,6 +176,7 @@ export default defineComponent({ .explore-outer { height: 100%; overflow: auto; + padding-top: 8px; .link-list { padding: 8px 10px; diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 3924dd32..e69720f5 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -1272,6 +1272,7 @@ export default defineComponent({ width: 100%; overflow: hidden; user-select: none; + -webkit-user-select: none; // iOS Safari is a horrible browser position: relative; } diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue index eb0d7616..b814b85f 100644 --- a/src/components/frame/Photo.vue +++ b/src/components/frame/Photo.vue @@ -390,6 +390,7 @@ div.img-outer { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; + -webkit-user-select: none; pointer-events: none; transition: border-radius 0.1s ease-in, transform 0.3s ease-in-out; diff --git a/src/components/frame/RowHead.vue b/src/components/frame/RowHead.vue index 976b52fc..76870d16 100644 --- a/src/components/frame/RowHead.vue +++ b/src/components/frame/RowHead.vue @@ -74,6 +74,8 @@ export default defineComponent({ padding-top: 10px; padding-left: 3px; font-size: 0.9em; + user-select: none; + -webkit-user-select: none; > div { position: relative; diff --git a/src/components/modal/EditDate.vue b/src/components/modal/EditDate.vue index 8980b4c9..b25e8ad0 100644 --- a/src/components/modal/EditDate.vue +++ b/src/components/modal/EditDate.vue @@ -335,6 +335,7 @@ export default defineComponent({ .field { width: 4.1em; display: inline-block; + max-width: calc(20% - 4px); } :deep label { diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue index 6367edd0..317a33f9 100644 --- a/src/components/modal/Modal.vue +++ b/src/components/modal/Modal.vue @@ -141,11 +141,25 @@ export default defineComponent({ } @media (max-width: 512px) { - .memories-modal:deep .modal-wrapper > .modal-container { - max-height: calc(100% - var(--header-height)); - height: unset; - top: unset; - bottom: 0; + .memories-modal:deep { + .modal-header { + display: none !important; + } + + .modal-wrapper > .modal-container { + max-height: calc(99% - env(keyboard-inset-height, 0px)); + height: unset; + top: unset; + bottom: env(keyboard-inset-height, 0px); + + // Hide scrollbar + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + width: 0 !important; + } + } } } diff --git a/src/components/modal/ShareModal.vue b/src/components/modal/ShareModal.vue index d943d104..7c00716f 100644 --- a/src/components/modal/ShareModal.vue +++ b/src/components/modal/ShareModal.vue @@ -252,5 +252,9 @@ ul.options { :deep .avatar { padding: 0 0.5em; } + + @media (max-width: 512px) { + font-size: 0.9em; + } } diff --git a/src/main.ts b/src/main.ts index b878bbca..6f88b5cd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -75,6 +75,11 @@ globalThis.videoClientId = getClientId(); globalThis.videoClientIdPersistent = localStorage.getItem('videoClientIdPersistent') ?? getClientId(); localStorage.setItem('videoClientIdPersistent', globalThis.videoClientIdPersistent); +// Turn on virtual keyboard support +if ('virtualKeyboard' in navigator) { + (navigator.virtualKeyboard).overlaysContent = true; +} + Vue.mixin(GlobalMixin as any); Vue.use(VueVirtualScroller); Vue.component('XImg', XImg);