restructure html, eliminate .tool divs

Treat each input and button as a direct child of the `.group` class, removing the intermediate div and reassign the `tool` classname to those inputs and buttons.  One item, the current / total page "set", is wrapped in a .tool div because they should be considered one item (even within the .group container).

And then a bunch of CSS adjustments to match the new structure.

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -44,17 +44,17 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	return (
 		<div className='toolBar'>
 			<div className='group'>
-				<div className='tool'>
 				<button
+					id='zoom-out'
+					className='tool'
 					onClick={()=>handleZoomChange(-20)}
 					disabled={zoomLevel <= MIN_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-minus' />
 				</button>
-				</div>
-				<div className='tool'>
 				<input
-						className='slider'
+					id='zoom-slider'
+					className='range-input tool'
 					type='range'
 					name='zoom'
 					list='zoomLevels'
@@ -67,35 +67,35 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<datalist id='zoomLevels'>
 					<option value='100' />
 				</datalist>
-				</div>
 
-				<div className='tool'>
 				<button
+					id='zoom-in'
+					className='tool'
 					onClick={()=>handleZoomChange(20)}
 					disabled={zoomLevel >= MAX_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-plus' />
 				</button>
 			</div>
-			</div>
 
 			<div className='group'>
-				<div className='tool'>
 				<button
-						className='previousPage'
+					id='previous-page'
+					className='previousPage tool'
 					onClick={()=>scrollToPage(pageInput - 1)}
 					disabled={pageInput <= 1}
 				>
 					<i className='fas fa-arrow-left'></i>
 				</button>
-				</div>
 
+				<div className='tool'>
 					<input
+						id='page-input'
+						class='text-input'
 						type='text'
 						name='page'
 						inputMode='numeric'
 						pattern='[0-9]'
-					id='pageInput'
 						value={pageInput}
 						onChange={(e)=>{
 							handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
@@ -104,11 +104,12 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					/>
 
 					<span id='page-count'>/ {totalPages}</span>
+				</div>
+
 
-				<div className='tool'>
 				<button
-						className='nextPage'
+					id='next-page'
-						// onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}}
+					className='tool'
 					onClick={()=>scrollToPage(pageInput + 1)}
 					disabled={pageInput >= totalPages}
 				>
@@ -116,7 +117,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				</button>
 			</div>
 		</div>
-		</div>
 
 	);
 };

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -16,12 +16,18 @@
 
 	.group {
 		display          : flex;
+		gap: 0 3px;
 		align-items      : center;
 		justify-content  : center;
 		box-sizing       : border-box;
 		height: 28px;
-
 	}
+
+	.tool {
+		display: flex;
+		align-items: center;
+	}
+
 	input {
 		position       : relative;
 		height         : 1.5em;
@@ -32,7 +38,8 @@
 		border : 1px solid gray;
 		&:focus { outline : 1px solid #d3d3d3; }
 
-		&.slider {
+		// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
+		&.range-input {
 			color: #D3D3D3;
 			accent-color: #d3d3d3;
 			padding: 2px 0;
@@ -61,7 +68,8 @@
 			}
 		}
 
-		&#pageInput {
+		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
+		&#page-input {
 			width: 4ch;
 			text-align: center;
 			margin-right: 1ch;
@@ -70,17 +78,11 @@
 
 	}
 
-	.tool {
-		display     : flex;
-		align-items : center;
-		padding     : 0;
-		height: 100%;
-		width: auto;
-		box-sizing: content-box;
-
-		&:hover { background-color : #444444; }
 
 	button {
+		display     : flex;
+		align-items : center;
+		justify-content: center;
 		height           : 100%;
 		width            : auto;
 		min-width        : 46px;
@@ -88,6 +90,9 @@
 		font-weight      : unset;
 		color            : inherit;
 		background-color : unset;
+		box-sizing: content-box;
+
+		&:hover { background-color : #444444; }
 
 		&:focus { outline : 1px solid #d3d3d3; }
 
@@ -97,4 +102,3 @@
 		}
 	}
 }
-}