From 0033896340503e596813f68eb5a055598dcc2501 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= <rexfue@gmail.com>
Date: Sat, 16 May 2026 09:22:00 +0200
Subject: [PATCH] Remove inner box padding and border-radius on small screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .env.example             |  2 +-
 docker-compose.prod.yml  |  5 +----
 src/lib/mqtt-listener.ts |  9 +++++----
 src/routes/+page.svelte  | 12 +++++-------
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/.env.example b/.env.example
index 263d34b..e5a5f06 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
 MQTT_BROKER=nuccy
-MQTT_PORT=1882
+MQTT_PORT=1883
 MQTT_USER=rxf
 MQTT_PASSWORD=your_password_here
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index 4348429..8b42fe8 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -4,7 +4,7 @@ services:
     expose:
       - "3000"
     volumes:
-      - bodenfeuchte-data:/app/data
+      - ./data:/app/data
     env_file:
       - .env
     extra_hosts:
@@ -20,6 +20,3 @@ services:
     depends_on:
       - bodenfeuchte
     restart: unless-stopped
-
-volumes:
-  bodenfeuchte-data:
diff --git a/src/lib/mqtt-listener.ts b/src/lib/mqtt-listener.ts
index bf429e6..ae045ba 100644
--- a/src/lib/mqtt-listener.ts
+++ b/src/lib/mqtt-listener.ts
@@ -1,14 +1,15 @@
 import mqtt from 'mqtt';
 import { insertMeasurement } from './db';
+import { env } from '$env/dynamic/private';
 
 const TOPIC = 'zigbee2mqtt/Bodenfeuchte_1';
 
 export function startMqttListener(): void {
   const client = mqtt.connect({
-    host: process.env.MQTT_BROKER ?? 'nuccy',
-    port: Number(process.env.MQTT_PORT ?? 1882),
-    username: process.env.MQTT_USER ?? 'rxf',
-    password: process.env.MQTT_PASSWORD ?? '',
+    host: env.MQTT_BROKER ?? 'nuccy',
+    port: Number(env.MQTT_PORT ?? 1883),
+    username: env.MQTT_USER ?? 'rxf',
+    password: env.MQTT_PASSWORD ?? '',
   });
 
   client.on('connect', () => {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 43763f6..35cbc96 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -54,8 +54,6 @@
 						grid: { color: '#e5e7eb' },
 					},
 					y: {
-						min: 0,
-						max: 100,
 						ticks: { color: '#555', callback: v => `${v} %` },
 						grid: { color: '#e5e7eb' },
 					}
@@ -88,7 +86,7 @@
 </svelte:head>
 
 <div class="min-h-screen py-8 px-4" style="background:#f4f4f5; font-family: Arial, Helvetica, sans-serif;">
-	<div class="mx-auto flex flex-col" style="max-width:56rem; border:2px solid black; border-radius:0.75rem; background:#FFFFDD; min-height:calc(100vh - 4rem);">
+	<div class="mx-auto flex flex-col" style="max-width:56rem; border:2px solid black; border-radius:0.75rem; background:#FFFFDD; ">
 
 		<!-- Header -->
 		<div class="px-8 pt-6 pb-4 border-b-2 border-black">
@@ -96,11 +94,11 @@
 		</div>
 
 		<!-- Content -->
-		<div class="flex-1 px-8 py-6 flex flex-col gap-6">
+		<div class="flex-1 sm:px-8 py-6 flex flex-col gap-6">
 
 			<!-- Aktueller Wert -->
-			<div style="background:#CCCCFF; border:2px solid black; border-radius:0.5rem;" class="px-6 py-4 flex items-center justify-between">
-				<span class="text-gray-600 text-sm">Aktueller Wert</span>
+			<div style="background:#CCCCFF; border:2px solid black;" class="sm:rounded-lg px-6 py-4 flex items-center justify-between">
+				<span class="text-gray-600 font-bold text-2xl">Aktueller Wert</span>
 				{#if latest}
 					<div class="text-right">
 						<span class="text-4xl font-bold">{latest.soil_moisture.toFixed(1)}</span>
@@ -115,7 +113,7 @@
 			</div>
 
 			<!-- Diagramm -->
-			<div style="border:2px solid black; border-radius:0.5rem; background:white; height:340px;" class="p-4">
+			<div style="border:2px solid black; background:white; height:340px;" class="sm:rounded-lg p-4 pb-8">
 				<p class="text-xs text-gray-400 mb-2">Letzte 6 Stunden · Stand: {lastUpdate || '…'}</p>
 				{#if data.length === 0}
 					<div class="flex items-center justify-center h-full text-gray-400 text-sm">