Remove inner box padding and border-radius on small screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -1,4 +1,4 @@
 MQTT_BROKER=nuccy
-MQTT_PORT=1882
+MQTT_PORT=1883
 MQTT_USER=rxf
 MQTT_PASSWORD=your_password_here

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:

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',
+    host: env.MQTT_BROKER ?? 'nuccy',
-    port: Number(process.env.MQTT_PORT ?? 1882),
+    port: Number(env.MQTT_PORT ?? 1883),
-    username: process.env.MQTT_USER ?? 'rxf',
+    username: env.MQTT_USER ?? 'rxf',
-    password: process.env.MQTT_PASSWORD ?? '',
+    password: env.MQTT_PASSWORD ?? '',
   });
 
   client.on('connect', () => {

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">
+			<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 text-sm">Aktueller Wert</span>
+				<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">