Dashboard header styling improvements

client/src/assets/pages/_dashboard-page.scss

@@ -10,11 +10,23 @@
 	align-items: center;
 	margin-left: auto;
 	flex: 1;
+	justify-content: flex-end;
+
+	&.vertical {
+		button.icon {
+			margin-left: 0.25rem;
+		}
+	}
 
 	.dashboard-switch {
 		flex: 1;
 		display: flex;
 		align-items: center;
+
+		button {
+			margin-left: 0.25rem;
+			font-size: 125%;
+		}
 	}
 
 	.spacer {
@@ -38,8 +50,8 @@
 	right: 0;
 	top: 0;
 	bottom: 0;
-	z-index: 2;
+	z-index: 3;
-	width: 20rem;
+	width: 15rem;
 	display: flex;
 	max-width: 100%;
 	overflow: auto;

client/src/pages/dashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -1,4 +1,5 @@
 import { CancelIcon, FiltersIcon, PlusIcon, RefreshIcon } from '@/icons'
+import { cn } from '@/utils/cn'
 import { intervalToRange } from '@/utils/intervalToRange'
 import { useState } from 'preact/hooks'
 import { GRID_H_SNAP, GRID_WIDTH } from '../../constants'
@@ -42,7 +43,7 @@ export const DashboardHeader = () => {
 	}
 
 	return (
-		<div className="dashboard-head">
+		<div className={cn('dashboard-head', verticalMode && 'vertical')}>
 			{verticalMode && (
 				<>
 					<button className="icon" onClick={handleNewBox}>
@@ -56,21 +57,27 @@ export const DashboardHeader = () => {
 					</div>
 
 					{filtersShown && (
-						<div className="filters-panel">
+						<>
-							<div className="shadow" />
+							<div className="filters-panel">
-							<div className="inner">
+								<div className="shadow" />
-								<div
+								<div className="inner">
-									className="filter-close"
+									<div
-									onClick={() => setFiltersShown(false)}
+										className="filter-close"
-								>
+										onClick={() => setFiltersShown(false)}
-									<CancelIcon />
+									>
+										<CancelIcon />
+									</div>
+
+									<DashboardSwitch />
+
+									<DashboardFilters />
 								</div>
-
-								<DashboardSwitch />
-
-								<DashboardFilters />
 							</div>
-						</div>
+							<div
+								className="menu-overlay"
+								onClick={() => setFiltersShown(false)}
+							></div>
+						</>
 					)}
 				</>
 			)}

client/src/pages/dashboard/components/DashboardHeader/components/DashboardSwitch.tsx

@@ -25,11 +25,19 @@ export const DashboardSwitch = () => {
 				))}
 			</select>
 
-			<button onClick={() => setEdited(dashboard)}>
+			<button
+				className="icon"
+				title="Edit current dashboard"
+				onClick={() => setEdited(dashboard)}
+			>
 				<EditIcon />
 			</button>
 
-			<button onClick={() => setShowNew(true)}>
+			<button
+				className="icon"
+				title="Add new dashboard"
+				onClick={() => setShowNew(true)}
+			>
 				<PlusIcon />
 			</button>