Merge pull request #837 from Adamant-im/fix/revert-samsung-changes

Fix: style height issuies

Author: S-FrontendDev

src/App.vue

@@ -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>
@@ -83,18 +83,7 @@ setLocale()
 </script>
 
 <style lang="scss" scoped>
-@use 'sass:map';
 @use '@/assets/styles/themes/adamant/_mixins.scss';
-@use '@/assets/styles/generic/_variables.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);
-  overflow-y: scroll;
-}
 
 .v-theme--light.application--linear-gradient {
   @include mixins.linear-gradient-light();

src/assets/styles/components/_chat.scss

@@ -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/components/AppNavigation.vue

@@ -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/Chat/Chat.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/Chats.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/transactions/TransactionTemplate.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/layouts/no-container.vue

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

src/layouts/toolbar.vue

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

src/views/AppSidebar.vue

@@ -222,8 +222,6 @@ onBeforeUnmount(() => {
 
   &__with-aside {
     max-width: 1512px;
-    height: 100%;
-
     @media (min-width: 1513px) {
       border-right: 2px solid black;
       border-left: 2px solid black;
@@ -233,17 +231,19 @@ onBeforeUnmount(() => {
   &__aside {
     width: var(--asideWidth);
     min-height: 100%;
-    height: calc(100% - var(--v-layout-bottom));
+    height: calc(100vh - var(--v-layout-bottom));
     border-right: 2px solid black;
     position: relative;
     max-width: 75%;
     user-select: none;
 
     @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
+      margin-top: env(safe-area-inset-top);
+      height: calc(100vh - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
       border-right: none;
     }
 
-      &::after {
+    &::after {
       content: '';
       position: absolute;
       right: 0;
@@ -271,10 +271,15 @@ onBeforeUnmount(() => {
   }
 
   &__layout {
+    @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
+      margin-top: env(safe-area-inset-top);
+      height: calc(100vh - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
+    }
+
     flex: 1 1 auto;
     overflow-y: auto;
     overflow-x: hidden;
-    height: calc(100vh - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
+    height: calc(100vh - var(--v-layout-bottom));
     width: calc(100% - var(--asideWidth));
 
     &:deep(> .v-container) {

src/views/SendFunds.vue

@@ -128,4 +128,14 @@ 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>