dataTables pagination number buttons expand

I am developing further dataTables in my project I am doing and is coming on nicely but today I have added in numbers for the pagination under the dataTable and have noticed if I click on a number in the pagination, it expands. I have attached a screenshot of the issue. Below is the current coding I have

<script>
jQuery(document).ready(function($) {
// Initialize Datatables
$.fn.dataTable.ext.classes.sPageButton = 'button button-primary'; // Change Pagination Button Class
} );
</script>

<script>

var dataTables = $('#datatable').DataTable({
language: {
paginate: {
next: '<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>',
previous: '<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>'
}
},
"sPaginationType": "full_numbers",
"info": "Showing page _PAGE_ of _PAGES_",
"lengthChange": false,
"dom": 'lrtip',
"ordering": false,
"scrollY": false
});

function paginateScroll() {
$('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 300);
console.log('pagination button clicked'); //remove after test
$(".paginate_button").unbind('click', paginateScroll);
$(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();

$('#all').on('click', function () {
dataTables.columns(2).search("").draw();
});

$('#pendingsupport').on('click', function () {
dataTables.columns(2).search("PENDING SUPPORT").draw();
});

$('#open').on('click', function () {
dataTables.columns(2).search("OPEN").draw();
});

$('#closed').on('click', function () {
dataTables.columns(2).search("CLOSED").draw();
});
</script>

 

Sorted this issue, it was some extra pagination css causing the issue