From a97cc605f742d02b423a58aec8998e7a33f95868 Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Tue, 10 Feb 2026 15:29:14 +0100
Subject: [PATCH] Fix responsive breakpoints for web component deployment

Replace CSS @media queries with @container queries so breakpoints
respond to the component's container width instead of the viewport,
which doesn't work when embedded as a web component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/tree/ProfileCloudTreeItem.svelte | 3 ++-
 src/routes/BrowserLayout.svelte                     | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/tree/ProfileCloudTreeItem.svelte b/src/lib/components/tree/ProfileCloudTreeItem.svelte
index afb4fd4..ae32a49 100644
--- a/src/lib/components/tree/ProfileCloudTreeItem.svelte
+++ b/src/lib/components/tree/ProfileCloudTreeItem.svelte
@@ -97,6 +97,7 @@
 
 <style>
   .button {
+    container-type: inline-size;
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
@@ -207,7 +208,7 @@
     white-space: nowrap;
   }
 
-  @media (max-width: 400px) {
+  @container (max-width: 400px) {
     .modified-date {
       display: none;
     }
diff --git a/src/routes/BrowserLayout.svelte b/src/routes/BrowserLayout.svelte
index 6287051..a6242b3 100644
--- a/src/routes/BrowserLayout.svelte
+++ b/src/routes/BrowserLayout.svelte
@@ -104,6 +104,7 @@
 <style>
   /* Main container */
   #main {
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -137,14 +138,14 @@
     gap: 1rem; /* gap-4 */
   }
 
-  @media (min-width: 768px) {
+  @container (min-width: 768px) {
     /* md:grid-cols-2 */
     .configs-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
 
-  @media (min-width: 1024px) {
+  @container (min-width: 1024px) {
     /* lg:py-8 and lg:grid-cols-3 */
     .configs-grid {
       padding-top: 2rem;