Merge pull request #833 from Adamant-im/dev

v4.10.5

Author: S-FrontendDev

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "im.adamant.adamantmessengerpwa"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 4104
-        versionName "4.10.4"
+        versionCode 4105
+        versionName "4.10.5"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "adamant-im",
-  "version": "4.10.4",
+  "version": "4.10.5",
   "type": "module",
   "author": "ADAMANT Foundation <devs@adamant.im>",
   "license": "GPLv3",

package.json

@@ -3,7 +3,7 @@
     <UploadAttachmentExitPrompt />
     <warning-on-addresses-dialog v-model="showWarningOnAddressesDialog" />
 
-    <v-main class="application--main">
+    <v-main>
       <router-view />
     </v-main>
   </v-app>
@@ -85,14 +85,6 @@ setLocale()
 <style lang="scss" scoped>
 @use '@/assets/styles/themes/adamant/_mixins.scss';
 
-.application--main {
-  flex: none;
-  position: relative;
-  height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
-  height: calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
-  margin-top: env(safe-area-inset-top);
-}
-
 .v-theme--light.application--linear-gradient {
   @include mixins.linear-gradient-light();
 }

src/App.vue

@@ -23,14 +23,19 @@ $scroll-bar-width: 4px;
 .a-chat {
   display: block;
   text-decoration: none;
-  height: 100%;
+  height: 100%; // <-- Fallback for Chrome < v108
+  // Chrome supports `dvh, lvh...` units starting with v108.
+  // See https://caniuse.com/viewport-unit-variants
+  height: calc(100dvh - var(--v-layout-bottom));
   position: relative;
 
   @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
     position: fixed;
     left: 0;
     right: 0;
     bottom: env(safe-area-inset-bottom);
+    top: env(safe-area-inset-top);
+    height: calc(100dvh - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
   }
 
   &__content {

src/assets/styles/components/_chat.scss

@@ -91,6 +91,7 @@ onMounted(() => {
 @use 'sass:map';
 @use '@/assets/styles/settings/_colors.scss';
 @use 'vuetify/settings';
+@use '@/assets/styles/generic/_variables.scss';
 
 /**
  * 1. Navigation Button.
@@ -101,6 +102,10 @@ onMounted(() => {
   &.v-bottom-navigation {
     transform: unset !important;
     overflow: visible;
+
+    @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
+      bottom: calc(0px +  env(safe-area-inset-bottom)) !important;
+    }
   }
   &.v-bottom-navigation .v-btn {
     font-weight: 300;

src/components/AppNavigation.vue

@@ -949,7 +949,7 @@ const onKeyPress = (e: KeyboardEvent) => {
   margin-right: 8px;
 }
 .chat {
-  height: 100%;
+  height: calc(100vh - var(--v-layout-bottom));
   box-shadow: none;
   background-color: transparent !important;
 }

src/components/Chat/Chat.vue

@@ -291,8 +291,10 @@ const markAllAsRead = () => {
 @use 'sass:map';
 @use '@/assets/styles/settings/_colors.scss';
 @use 'vuetify/settings';
+@use '@/assets/styles/generic/_variables.scss';
 
 .chats-view {
+  margin-top: env(safe-area-inset-top);
   height: 100%;
 
   &.a-container,
@@ -331,6 +333,10 @@ const markAllAsRead = () => {
   }
   &__messages {
     &.chats-view__messages--chat {
+      @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
+        max-height: calc(100vh - 56px - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
+      }
+
       max-height: calc(100vh - 56px - var(--v-layout-bottom));
       overflow-y: auto;
     }

src/components/Chat/Chats.vue

@@ -369,6 +369,13 @@ const formatAmount = (amount: number, decimals = CryptosInfo[props.crypto].decim
 @use '@/assets/styles/settings/_colors.scss';
 
 .transaction-view {
+  position: relative;
+
+  &__content {
+    overflow-y: auto;
+    height: calc(100vh - var(--v-layout-bottom) - var(--toolbar-height));
+    padding-top: var(--toolbar-height);
+  }
 
   &__titlecontent {
     flex: 1 0 auto;

src/components/transactions/TransactionTemplate.vue

@@ -2,7 +2,7 @@
   <slot />
 
   <app-snackbar />
-  <app-navigation v-if="showNavigation" absolute />
+  <app-navigation v-if="showNavigation" />
 </template>
 
 <script setup lang="ts">