I seem to be having a little trouble getting my title bar to show up when I am using my tabPanel. It seems to want to go off the screen and only show up when I click the top of the browser on iOS. And Android it shows the toolbar, but it barely shows the tab bar at the bottom. Can anyone please help me with this?

here is what code I have right now:

Code:
new Ext.Application({


    name: 'Test',
    launch: function() {
        
        // store with data
        var data = {
            text: 'Groceries',
            items: [{
                text: 'Drinks',
                items: [{
                    text: 'Water',
                    items: [{
                        text: 'Sparkling',
                        leaf: true
                    },{
                        text: 'Still',
                        leaf: true
                    }]
                },{
                    text: 'Coffee',
                    leaf: true
                },{
                    text: 'Espresso',
                    leaf: true
                },{
                    text: 'Redbull',
                    leaf: true
                },{
                    text: 'Coke',
                    leaf: true
                },{
                    text: 'Diet Coke',
                    leaf: true
                }]
            },{
                text: 'Fruit',
                items: [{
                    text: 'Bananas',
                    leaf: true
                },{
                    text: 'Lemon',
                    leaf: true
                }]
            },{
                text: 'Snacks',
                items: [{
                    text: 'Nuts',
                    leaf: true
                },{
                    text: 'Pretzels',
                    leaf: true
                },{
                    text: 'Wasabi Peas',
                    leaf: true
                }]
            },{
                text: 'Empty Category',
                items: []
            }]
        };


            Ext.regModel('ListItem', {
                fields: [{name: 'text', type: 'string'}]
            });
            
            var store = new Ext.data.TreeStore({
                model: 'ListItem',
                root: data,
                proxy: {
                    type: 'ajax',
                    reader: {
                        type: 'tree',
                        root: 'items'
                    }
                }
            });




            var nestedList = new Ext.NestedList({
                fullscreen: true,
                title: 'Test2',
                displayField: 'text',
                iconCls: 'team',
                //dock: 'top',
                store: store
            });
            
            var tabPanel = new Ext.TabPanel ({
                layout: {
                    pack: 'center'
                },
                tabBarDock: 'bottom',
                ui: 'light',
                cardSwitchAnimation: {
                    type: 'slide',
                    cover: true
                },
                defaults: {
                    scroll: 'vertical'
                },
                fullscreen: true,
                items: [
                        {
                            title:'Test 1',
                            html: 'Test 1',
                            iconCls: 'home'
                        },
                        nestedList
                ]
            });
            
            var dockedItems = [
                    {
                    xtype: 'toolbar',
                    title: 'First Test App'
                    },
                    tabPanel
                        
                ]// JavaScript Document
        
            var appPanel = new Ext.Panel({
                id: 'appPanel',
                fullscreen: true,
                layout: 'card',
                dockedItems: dockedItems
            });
            
            
    }


});