view: many fixes for mobile

Signed-off-by: Varun Patil <radialapps@gmail.com>

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);
       }
     }

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;

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;
 }
 

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;
 

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;

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 {

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;
+      }
+    }
   }
 }
 </style>

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;
+  }
 }
 </style>

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) {
+  (<any>navigator.virtualKeyboard).overlaysContent = true;
+}
+
 Vue.mixin(GlobalMixin as any);
 Vue.use(VueVirtualScroller);
 Vue.component('XImg', XImg);