fix: ionic dynamic height tabs

Author: martinkaintas

src/composables/coinTokensProps.ts

@@ -18,7 +18,7 @@ interface ITokenPropsState {
 const tokenProps = ref<ITokenProps | null>(null);
 /**
  *  Data comming from a coin that will be passed to the tab components
- *  TokenDetails and  TokenTransaction when the user clicks in particular token asset.
+ *  TokenDetails and TokenTransaction when the user clicks in particular token asset.
  */
 export function useTokenProps(): ITokenPropsState {
   function setTokenProps(props: ITokenProps | null) {

src/composables/scrollTransactions.ts

@@ -3,17 +3,17 @@ import {
 } from 'vue';
 
 interface IScrollConf {
-  scrollConf: Ref<Boolean | null>
-  setScrollConf: (props: Boolean | null) => void
+  scrollConf: Ref<boolean | null>
+  setScrollConf: (props: boolean | null) => void
 }
 
-const scrollConf = ref<Boolean | null>(null);
+const scrollConf = ref<boolean | null>(null);
 /**
  *  Data comming from AccountDetailsTokens or AccountDetailsTransactions and will be passed
  *  to AccountDetailsBase in order to showFilters
  */
 export function useScrollConfig(): IScrollConf {
-  function setScrollConf(value: Boolean | null) {
+  function setScrollConf(value: boolean | null) {
     scrollConf.value = value;
   }
 

src/popup/components/AccountDetailsBase.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="account-details"
-  >
+  <div class="account-details">
     <div class="account-info-wrapper">
       <slot
         v-if="$slots['account-info']"
@@ -53,7 +51,10 @@
         />
       </div>
 
-      <div class="tabs-content">
+      <div
+        class="tabs-content"
+        :style="{ height: routerHeight }"
+      >
         <ion-router-outlet />
       </div>
     </div>
@@ -68,6 +69,7 @@ import {
   defineComponent,
   onBeforeUnmount,
   onMounted,
+  ref,
   watch,
 } from 'vue';
 import { useRoute } from 'vue-router';
@@ -116,13 +118,20 @@ export default defineComponent({
 
     const { balance } = useBalances({ store });
 
+    const routerHeight = ref<string>();
+
     const balanceNumeric = computed(() => balance.value.toNumber());
 
     const routeName = computed(() => route.name);
 
-    const showFilters = computed<boolean | any>(() => (
-      scrollConf.value
-    ));
+    const showFilters = computed<boolean>(() => (!!scrollConf.value));
+
+    function calculateRouterHeight() {
+      const ionicWrapperBottom = document.querySelector('.app-wrapper')?.getBoundingClientRect()?.bottom;
+      const headerElementBottom = document.querySelector('.header')?.getBoundingClientRect()?.bottom;
+      const routerContent = Math.ceil(ionicWrapperBottom! - headerElementBottom!);
+      routerHeight.value = `${routerContent}px`;
+    }
 
     watch(
       () => route,
@@ -131,12 +140,27 @@ export default defineComponent({
       },
     );
 
+    /**
+     * Observe tab height changes and recalculate router height.
+     * Tabs change height when filters are shown/hidden
+     */
+    function observeTabsHeight() {
+      const resizeObserver = new ResizeObserver(() => {
+        calculateRouterHeight();
+      });
+      resizeObserver.observe(document.querySelector('.header') as Element);
+    }
+
     onMounted(() => {
       if (IS_MOBILE_APP) {
         StatusBar.setBackgroundColor({
           color: '#191919',
         });
       }
+      setTimeout(() => {
+        observeTabsHeight();
+        calculateRouterHeight();
+      }, 250);
     });
 
     onBeforeUnmount(() => {
@@ -153,6 +177,7 @@ export default defineComponent({
       routeName,
       balanceNumeric,
       activeAccount,
+      routerHeight,
     };
   },
 });
@@ -241,8 +266,7 @@ export default defineComponent({
   .tabs-content {
     position: relative;
     padding: 0 var(--screen-padding-x);
-    // TODO fix this hack
-    height: 300px;
+    height: 350px;
   }
 
   .close-button {

src/popup/components/Tokens.vue

@@ -177,6 +177,7 @@ export default defineComponent({
 
   .icon {
     user-select: none;
+    width: max-content;
 
     .icon-image {
       width: var(--icon-size);

src/popup/pages/FungibleTokens/TokenContainer.vue

@@ -1,8 +1,6 @@
 <template>
   <ion-page>
-    <ion-content
-      class="ion-padding"
-    >
+    <ion-content class="ion-padding">
       <div class="token-container">
         <Loader v-if="loading" />
 
@@ -70,6 +68,7 @@
         </div>
         <ion-router-outlet
           class="token-router"
+          :style="{ height: routerHeight }"
         />
       </div>
     </ion-content>
@@ -90,6 +89,7 @@ import {
   onMounted,
   ref,
   unref,
+  nextTick,
 } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
@@ -194,6 +194,7 @@ export default defineComponent({
         exact: true,
       },
     ];
+    const routerHeight = ref<string>();
     const loading = ref<boolean>(true);
     const tokenPairs = ref<Record<string, IToken | null>>({ token0: null, token1: null });
     const tokenBalances = useGetter<IToken[]>('fungibleTokens/tokenBalances');
@@ -220,12 +221,35 @@ export default defineComponent({
 
     const convertedBalance = computed(() => +tokenData.value.convertedBalance! || 0);
 
+    function calculateRouterHeight() {
+      nextTick(() => {
+        const ionicWrapperBottom = document.querySelector('.app-wrapper')?.getBoundingClientRect()?.bottom;
+        const tabsWrapperElementBottom = document.querySelector('.sticky-tabs-wrapper')?.getBoundingClientRect().bottom;
+        routerHeight.value = `${ionicWrapperBottom! - tabsWrapperElementBottom!}px`!;
+      });
+    }
+
+    /**
+     * Observe tabs wrapper height changes and recalculate router height.
+     * Tabs change height when filters are shown/hidden
+     */
+    function observeTabsWrapperHeight() {
+      const resizeObserver = new ResizeObserver(() => {
+        calculateRouterHeight();
+      });
+      resizeObserver.observe(document.querySelector('.sticky-tabs-wrapper') as Element);
+    }
+
     onMounted(async () => {
       if (isContract(contractId) && !isAe) {
         await getAeSdk();
         tokenPairs.value = await store.dispatch('fungibleTokens/getContractTokenPairs', contractId);
       }
       loading.value = false;
+      setTimeout(() => {
+        observeTabsWrapperHeight();
+        calculateRouterHeight();
+      }, 250);
     });
 
     onIonViewDidEnter(() => {
@@ -267,14 +291,15 @@ export default defineComponent({
       routeName,
       isMultisig,
       routeParams,
+      routerHeight,
     };
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@use '../../../styles/variables';
-@use '../../../styles/typography';
+@use '@/styles/variables';
+@use '@/styles/typography';
 
 .token-container {
   --screen-padding-x: 12px;