Fix mobile TabContainer switcher sizing and position (#3874)

CHANGELOG.md

@@ -14,6 +14,7 @@
 * `TreeMap` and `SplitTreeMap` are now cross-platform and can be used in mobile applications.
   Their import paths have changed from `@xh/hoist/desktop/cmp/treemap` to `@xh/hoist/cmp/treemap`.
 * The `RefreshButton` `model` prop has been renamed `target` for clarity and consistency.
+
 ### 🎁 New Features
 
 * Major Improvements to ViewManager component
@@ -27,6 +28,11 @@
 * Added support for `AuthZeroClientConfig.audience` to support improved configuration of Auth0 OAuth
   clients requesting access tokens, covering cases when third-party cookies are blocked.
 
+### 🐞 Bug Fixes
+
+* Fixed sizing and position of mobile `TabContainer` switcher, particularly when the switcher is
+  positioned with `top` orientation.
+
 ### ⚙️ Technical
 
 * Added explicit `devDependencies` and `resolutions` blocks for `@types/react[-dom]` at v18.x.

mobile/cmp/tab/impl/Tabs.scss

@@ -26,6 +26,9 @@
 }
 
 .xh-tab-container {
+  // Override Onsen's tabbar height CSS var
+  --tabbar-height: var(--xh-tbar-min-size-px);
+
   position: relative;
   flex: auto;
 
@@ -49,10 +52,6 @@
       line-height: var(--xh-tbar-min-size-px);
       color: var(--xh-text-color);
     }
-
-    &__content {
-      bottom: var(--xh-tbar-min-size-px);
-    }
   }
 
   // Tab visibility is managed via TabContainerModel.renderMode, rather than Onsen's internal state.