Merge pull request #829 from Adamant-im/fix/samsung-height

fix: style issues

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 4103
-        versionName "4.10.3"
+        versionCode 4104
+        versionName "4.10.4"
         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.3",
+  "version": "4.10.4",
   "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>
+    <v-main class="application--main">
       <router-view />
     </v-main>
   </v-app>
@@ -85,15 +85,13 @@ setLocale()
 <style lang="scss" scoped>
 @use '@/assets/styles/themes/adamant/_mixins.scss';
 
-.application--linear-gradient {
+.application--main {
   overflow: hidden;
-
-  &:deep(.v-application__wrap) {
-    min-height: unset;
-    margin-top: env(safe-area-inset-top);
-    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));
-  }
+  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 {

src/App.vue

@@ -23,16 +23,14 @@ $scroll-bar-width: 4px;
 .a-chat {
   display: block;
   text-decoration: none;
-  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));
+  height: 100%;
   position: relative;
 
   @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
     position: fixed;
     left: 0;
     right: 0;
+    bottom: env(safe-area-inset-bottom);
   }
 
   &__content {

src/assets/styles/components/_chat.scss

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

src/components/Chat/Chat.vue

@@ -369,13 +369,6 @@ 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

@@ -239,14 +239,22 @@ onBeforeUnmount(() => {
     max-width: 75%;
     user-select: none;
 
-    &::after {
+    @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
+      border-right: none;
+    }
+
+      &::after {
       content: '';
       position: absolute;
       right: 0;
       top: 0;
       width: 10px;
       height: 100%;
       cursor: ew-resize;
+
+      @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
+        content: none;
+      }
     }
 
     @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
@@ -266,7 +274,7 @@ onBeforeUnmount(() => {
     flex: 1 1 auto;
     overflow-y: auto;
     overflow-x: hidden;
-    height: calc(100vh - var(--v-layout-bottom));
+    height: 100%;
     width: calc(100% - var(--asideWidth));
 
     &:deep(> .v-container) {

src/views/AppSidebar.vue

@@ -128,14 +128,4 @@ const onError = (message: string) => {
   })
 }
 </script>
-<style scoped lang="scss">
-.send-funds {
-  position: relative;
-
-  &__content {
-    overflow-y: auto;
-    height: calc(100vh - var(--v-layout-bottom) - var(--toolbar-height));
-    padding-top: var(--toolbar-height);
-  }
-}
-</style>
+