fix(gui): scope homepage css styles to prevent global conflicts

1 file · +16 -10

M gui/src/pages/Homepage.svelte +16 -10


@@ -139,6 +139,7 @@
139	139		const loading = $derived(historyLoading \|\| shortcutsLoading);
140	140		</script>
141	141
	142	+	<div class="homepage-container">
142	143		<div class="container">
143	144		<div class="history-section">
144	145		<h2 class="section-title">Recent History</h2>

@@ -198,23 +199,28 @@
198	199		</div>
199	200		</div>
200	201		</div>
	202	+	</div>
201	203
202	204		<style>
203		-	/* Global styles - using CSS to match the original design */
204		-	:global(*) {
205		-	margin: 0;
206		-	padding: 0;
207		-	box-sizing: border-box;
208		-	}
209		-
210		-	:global(body) {
	205	+	/* Scoped homepage container to prevent global CSS conflicts */
	206	+	.homepage-container {
211	207		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
212	208		background: #1a1a1a;
213	209		color: #ffffff;
214		-	height: 100vh;
	210	+	min-height: 100vh;
	211	+	overflow-x: hidden;
215	212		display: flex;
216	213		flex-direction: column;
217		-	overflow-x: hidden;
	214	+	margin: 0;
	215	+	padding: 0;
	216	+	box-sizing: border-box;
	217	+	}
	218	+
	219	+	/* Reset styles for children, but scoped to homepage only */
	220	+	.homepage-container * {
	221	+	margin: 0;
	222	+	padding: 0;
	223	+	box-sizing: border-box;
218	224		}
219	225
220	226		.container {

   const loading = $derived(historyLoading || shortcutsLoading);
 </script>
+<div class="homepage-container">
 <div class="container">
   <div class="history-section">
     <h2 class="section-title">Recent History</h2>
     </div>
   </div>
 </div>
+</div>
 <style>
-  /* Global styles - using CSS to match the original design */
+  /* Scoped homepage container to prevent global CSS conflicts */
-  :global(*) {
+  .homepage-container {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-  :global(body) {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: #1a1a1a;
     color: #ffffff;
-    height: 100vh;
+    min-height: 100vh;
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
-    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  /* Reset styles for children, but scoped to homepage only */
+  .homepage-container * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
   }
   .container {