Tab button texture issue

[XbStyx]

Hello guys I'm fairly new with lua and WOW API , i have created a panel with tabs but for some reasons the button texture is overlaping as seen in the image below.



below is my method that creates the buttons

local nextX = 0
function RaresKillTracker:CreateTab(expansion, tabCount)
    local buttonHeight = 30
	
    if not self.uiFrame then
        print("Error: self.uiFrame is nil")
        return nil
    end

    if not expansion then
        print("Error: expansion is nil")
        return nil
    end

    local tabButton = CreateFrame("Button", "TabButton" .. tabCount, self.uiFrame, "CharacterFrameTabButtonTemplate")
    if not tabButton then
        print("Error: Failed to create tabButton")
        return nil
    end

    tabButton:SetText(expansion)
    tabButton:SetHeight(buttonHeight)
    tabButton:SetWidth(tabButton:GetTextWidth() + 20)  
    tabButton:SetPoint("BOTTOMLEFT", nextX, -28)
	tabButton:UnlockHighlight()
    
	nextX = nextX + tabButton:GetTextWidth() + 30
    return tabButton
end

and here is my on click event

tabButton:SetScript("OnClick", function()
            for _, frame in pairs(tabContentFrames) do
                frame:Hide()
            end
            tabContentFrames[expansion]:Show()
            tabButton:Disable()
            for exp, btn in pairs(tabButtons) do
                if exp ~= expansion then
                    btn:Enable()
                end
            end

            self:UpdateZoneNPCs(zones[1].npcs)

            local firstZoneButton = tabContentFrames[expansion]:GetChildren()
            if firstZoneButton then
                firstZoneButton:Disable()
            end
			for _, zbtn in pairs({tabContentFrames[expansion]:GetChildren()}) do
                if zbtn ~= firstZoneButton then
                    zbtn:Enable()
                end
            end
        end)

[SDPhantom]

It's a good idea when you're inheriting a template, to look at how that template is implemented. For example, here's CharacterFrameTabButtonTemplate.

All the extra textures expect a button height of 32. That's the template's defined height. You don't need to set that, just the width. If you really want to override the height, you need to do the same to the extra textures defined in the template. There are also a collection of supporting functions that help with sizing and the visual state of the tab button. Namely PanelTemplates_TabResize() for size and PanelTemplates_SelectTab(), PanelTemplates_DeselectTab(), and PanelTemplates_SetDisabledTabState() for visibility state.



PS: You should use unique names for any globals you register as everything runs in a shared environment. This means names you use share the same space with globals from Blizzard code along with every other addon that is also loaded. To prevent name collisions, it's suggested to prepend names you use with the name of your addon to further differentiate them. This applies to frame names too as they're stored as globals under their given name. For example, TabButton1 should be renamed to something like RaresKillTrackerTabButton1.

Unless you intend to replace the current script for a frame, you should use :HookScript() instead of :SetScript().