Use local time

client/src/views/Dashboard.vue

@@ -2,6 +2,7 @@
 import EnvironmentCard from '@/components/EnvironmentCard.vue';
 import GraphModal from '@/components/GraphModal.vue';
 import HourlyForecast from '@/components/HourlyForecast.vue';
+import {BASE} from '@/services/api.ts';
 import {formatDate} from '@ztimson/utils';
 import {onMounted, onUnmounted, provide, ref} from 'vue';
 import MapView from '../components/MapView.vue';
@@ -49,10 +50,6 @@ onUnmounted(() => {
 
 .panel-col {
 	width: 380px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
 	padding: 16px;
 	overflow-y: auto;
 	border-left: 1px solid var(--border);
@@ -154,7 +151,7 @@ onUnmounted(() => {
 		</div>
 
 		<div class="panel-col">
-			<div class="flex-r align-items-center gap-3">
+			<div class="flex-r align-items-center gap-3 mb-3">
 				<div class="pe-3" style="border-right: 2px solid var(--border)">
 					<h2 class="fs-6 m-0" style="line-height: 1em">{{time}}</h2>
 				</div>
@@ -163,11 +160,14 @@ onUnmounted(() => {
 					<h2 class="m-0 fs-1 fg-muted" style="line-height: 1em">{{date}}</h2>
 				</div>
 			</div>
-			<CurrentWeather />
-			<HourlyForecast />
-			<ForecastStrip />
+			<CurrentWeather class="mb-3" />
+			<HourlyForecast class="mb-3" />
+			<ForecastStrip class="mb-3" />
 
-			<EnvironmentCard />
+			<EnvironmentCard class="mb-3" />
+			<div class="align-x">
+				<a :href="BASE + '/docs'" style="font-size: 0.75em;" target="_blank">OpenAPI Docs</a>
+			</div>
 		</div>
 
 		<GraphModal :metric-key="selectedMetric" @close="selectedMetric = null" />