Calendar header CSS

public/css/components/calendar/frame.css

@@ -107,8 +107,44 @@
 	align-items: end;
 }
 /* Header */
-.fhc-calendar-base-header > .row {
+.fhc-calendar-base-header .header-picker {
+	display: flex;
+	justify-content: center;
+}
+.fhc-calendar-base-header .header-actions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
 	align-items: center;
+	margin-bottom: .5rem;
+	row-gap: .5rem;
+}
+.fhc-calendar-base-header .header-userdefined:empty {
+	display: none;
+}
+@media (min-width: 768px) {
+	.fhc-calendar-base-header {
+		display: grid;
+		grid-template-columns: [userdefined] 1fr [picker] max-content [modes] 1fr;
+		align-items: center;
+	}
+	.fhc-calendar-base-header .header-actions {
+		grid-column: 1 / -1;
+		grid-row: 1;
+		display: grid;
+		grid-template-columns: subgrid;
+		margin-bottom: 0;
+	}
+	.fhc-calendar-base-header .header-userdefined {
+		grid-column: userdefined;
+	}
+	.fhc-calendar-base-header .header-modes {
+		grid-column: modes;
+	}
+	.fhc-calendar-base-header .header-picker {
+		grid-column: picker;
+		grid-row: 1;
+	}
 }
 
 /* Modes */

public/js/components/Calendar/Base/Header.js

@@ -47,37 +47,11 @@ export default {
 	},
 	template: /* html */`
 	<div class="fhc-calendar-base-header">
-		<div class="row">
-			<div class="col">
+		<div class="header-actions">
+			<div class="header-userdefined">
 				<slot />
 			</div>
-			<div class="col-auto d-flex justify-content-center">
-				<div class="btn-group" role="group">
-					<button
-						class="btn btn-outline-secondary border-0"
-						@click="$emit('prev')"
-						:disabled="open"
-					>
-						<i class="fa fa-chevron-left"></i>
-					</button>
-					<date-picker
-						:mode="mode"
-						:date="date"
-						@update:date="$emit('update:date', $event)"
-						@open="open = true"
-						@closed="open = false"
-						:list-length="modeOptions.length"
-					/>
-					<button
-						class="btn btn-outline-secondary border-0"
-						@click="$emit('next')"
-						:disabled="open"
-					>
-						<i class="fa fa-chevron-right"></i>
-					</button>
-				</div>
-			</div>
-			<div class="col">
+			<div class="header-modes">
 				<div class="d-flex gap-1 justify-content-end" role="group">
 					<button
 						v-if="btnMonth"
@@ -118,6 +92,32 @@ export default {
 				</div>
 			</div>
 		</div>
+		<div class="header-picker">
+			<div class="btn-group" role="group">
+				<button
+					class="btn btn-outline-secondary border-0"
+					@click="$emit('prev')"
+					:disabled="open"
+				>
+					<i class="fa fa-chevron-left"></i>
+				</button>
+				<date-picker
+					:mode="mode"
+					:date="date"
+					@update:date="$emit('update:date', $event)"
+					@open="open = true"
+					@closed="open = false"
+					:list-length="modeOptions.length"
+				/>
+				<button
+					class="btn btn-outline-secondary border-0"
+					@click="$emit('next')"
+					:disabled="open"
+				>
+					<i class="fa fa-chevron-right"></i>
+				</button>
+			</div>
+		</div>
 	</div>
 	`
 }

public/js/components/Cis/LvPlan/LvPlan.js

@@ -219,11 +219,11 @@ export default {
 						<a
 							:href="link"
 							:aria-label="title"
-							class="py-1 px-2 m-1 btn btn-outline-secondary card"
+							class="py-1 btn btn-outline-secondary"
 						>
 							<div class="d-flex flex-column">
 								<i aria-hidden="true" :class="icon"></i>
-								<span class="small">{{ title }}</span>
+								<span style="font-size:.5rem">{{ title }}</span>
 							</div>
 						</a>
 					</div>