Fix nested buttons in dropdown warning

Fixes a console warning for the table size dropdown and the bottom right
of most pages. Also slightly fixes the CSS
to avoid overlapping of elements

Author: Arnei

src/components/shared/Table.tsx

@@ -37,7 +37,7 @@ import { useAppDispatch, useAppSelector } from "../../store";
 import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
 import { ModalHandle } from "./modals/Modal";
 
-const containerPageSize = React.createRef<HTMLButtonElement>();
+const containerPageSize = React.createRef<HTMLDivElement>();
 
 type TemplateMap = {
 	[key: string]: ({ row }: { row: any }) => JSX.Element | JSX.Element[]
@@ -289,10 +289,12 @@ const Table = ({
 
 			{/* Selection of page size */}
 			<div id="tbl-view-controls-container">
-				<button
+				<div
 					className="drop-down-container small flipped"
 					onClick={() => setShowPageSizes(!showPageSizes)}
 					ref={containerPageSize}
+					role="button"
+					tabIndex={0}
 				>
 					<span>{pagination.limit}</span>
 					{/* Drop down menu for selection of page size */}
@@ -310,7 +312,7 @@ const Table = ({
 							))}
 						</ul>
 					)}
-				</button>
+				</div>
 
 				{/* Pagination and navigation trough pages */}
 				<div className="pagination">