Code Update

frontend/src/routes/+layout.svelte

@@ -7,14 +7,11 @@
 
 	let { children } = $props();
 
-	// State to track if we are in the Tauri App
 	let isApp = $state(false);
 
 	onMount(() => {
-		// Strategy 2: Determine mode
 		isApp = isTauri();
 
-		// Strategy 1: Add platform class to body for global styling
 		if (isApp) {
 			document.body.classList.add("platform-native");
 		} else {
@@ -23,7 +20,6 @@
 	});
 </script>
 
-<!-- Strategy 2: Layout Splitting -->
 {#if isApp}
 	<main class="app-container">
 		{@render children()}
@@ -38,38 +34,32 @@
 {/if}
 
 <style>
-	/* Base styles */
 	:global(body) {
 		margin: 0;
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 			Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 	}
 
-	/* Web specific container */
 	.web-container {
-		min-height: 80vh; /* Ensure footer pushes down */
+		min-height: 80vh;
 		max-width: 1200px;
 		margin: 0 auto;
 		padding: 20px;
 	}
 
-	/* App specific container - Full height, no body scroll usually handled here or in global css */
 	.app-container {
 		height: 100vh;
 		overflow-y: auto;
 		padding: 10px;
-		padding-bottom: 70px; /* Space for TabBar */
+		padding-bottom: 70px;
 		box-sizing: border-box;
 	}
 
-	/* Strategy 1 Example: Global Style Overrides based on class */
-	/* Web Buttons: Boxy */
 	:global(.platform-web button) {
 		border-radius: 4px;
 		padding: 8px 16px;
 	}
 
-	/* Native Buttons: Rounder and larger touch targets */
 	:global(.platform-native button) {
 		border-radius: 20px;
 		padding: 12px 24px;