MOBILE-3320 tabs: Fix tab bottom padding

src/core/classes/tabs.ts

@@ -144,15 +144,36 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
 
         this.tabBarHeight = this.tabBarElement.offsetHeight;
 
-        if (this.tabsShown) {
+        this.applyScroll(this.tabsShown, this.lastScroll);
-            // Smooth translation.
+    }
-            this.tabBarElement.style.top = - this.lastScroll + 'px';
+
-            this.tabBarElement.style.height = 'calc(100% + ' + scroll + 'px';
+    /**
-        } else {
+     * Apply scroll to hiding tabs.
-            this.tabBarElement.classList.add('tabs-hidden');
+     *
-            this.tabBarElement.style.top = '0';
+     * @param showTabs Show or completely hide tabs.
-            this.tabBarElement.style.height = '';
+     * @param scroll Scroll position.
+     */
+    protected applyScroll(showTabs: boolean, scroll?: number): void {
+        if (!this.tabBarElement || !this.tabBarHeight) {
+
+            return;
         }
+
+        if (showTabs) {
+            // Smooth translation.
+            this.tabBarElement!.classList.remove('tabs-hidden');
+            if (scroll === 0) {
+                this.tabBarElement!.style.height = '';
+                this.lastScroll = 0;
+            } else if (scroll !== undefined) {
+                this.tabBarElement!.style.height = (this.tabBarHeight - scroll) + 'px';
+            }
+        } else {
+            this.tabBarElement!.classList.add('tabs-hidden');
+            this.tabBarElement!.style.height = '';
+        }
+
+        this.tabsShown = showTabs;
     }
 
     /**
@@ -478,11 +499,7 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
 
         if (scrollTop <= 0) {
             // Ensure tabbar is shown.
-            this.tabsElement.style.top = '0';
+            this.applyScroll(true, 0);
-            this.tabsElement.style.height = '';
-            this.tabBarElement.classList.remove('tabs-hidden');
-            this.tabsShown = true;
-            this.lastScroll = 0;
 
             return;
         }
@@ -493,22 +510,17 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
         }
 
         if (this.tabsShown && scrollTop > this.tabBarHeight) {
-            this.tabsShown = false;
-
             // Hide tabs.
-            this.tabBarElement.classList.add('tabs-hidden');
+            this.applyScroll(false);
-            this.tabsElement.style.top = '0';
-            this.tabsElement.style.height = '';
         } else if (!this.tabsShown && scrollTop <= this.tabBarHeight) {
-            this.tabsShown = true;
+            this.applyScroll(true);
-            this.tabBarElement.classList.remove('tabs-hidden');
         }
 
         if (this.tabsShown && scrollElement.scrollHeight > scrollElement.clientHeight + (this.tabBarHeight - scrollTop)) {
             // Smooth translation.
-            this.tabsElement.style.top = - scrollTop + 'px';
+            this.applyScroll(true, scrollTop);
-            this.tabsElement.style.height = 'calc(100% + ' + scrollTop + 'px';
         }
+
         // Use lastScroll after moving the tabs to avoid flickering.
         this.lastScroll = scrollTop;
     }

src/core/components/tabs/tabs.scss

@@ -22,6 +22,8 @@
         -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
         filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
         border: 0;
+        display: flex;
+        align-items: flex-end;
 
         ion-row {
             width: 100%;