From 310643567e54a4edecf5556d4caf228cd605dae8 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Thu, 16 Jan 2025 10:16:02 +0800
Subject: [PATCH] replace custom max-width with 100% (#2034)

* replace custom max-width with 100%

* apply max-width 1040px to blog-app experiments-realm
---
 packages/experiments-realm/blog-app.gts          | 4 ++++
 packages/experiments-realm/components/layout.gts | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/experiments-realm/blog-app.gts b/packages/experiments-realm/blog-app.gts
index 5969dd9482..c919ded2fe 100644
--- a/packages/experiments-realm/blog-app.gts
+++ b/packages/experiments-realm/blog-app.gts
@@ -165,6 +165,7 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
       @filters={{this.filters}}
       @activeFilter={{this.activeFilter}}
       @onFilterChange={{this.onFilterChange}}
+      class='blog-app'
     >
       <:sidebar>
         <TitleGroup
@@ -232,6 +233,9 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
       </:grid>
     </Layout>
     <style scoped>
+      .blog-app {
+        --content-max-width: 1040px;
+      }
       .sidebar-create-button {
         --icon-color: currentColor;
         --boxel-loading-indicator-size: 15px;
diff --git a/packages/experiments-realm/components/layout.gts b/packages/experiments-realm/components/layout.gts
index 835b3842fc..b1be48b940 100644
--- a/packages/experiments-realm/components/layout.gts
+++ b/packages/experiments-realm/components/layout.gts
@@ -146,7 +146,6 @@ export class Layout extends GlimmerComponent<LayoutSignature> {
       .layout {
         --layout-padding: var(--boxel-sp-lg);
         --sidebar-width: 255px;
-        --content-max-width: 1040px;
         --layout-background-color: var(--boxel-light);
         display: flex;
         width: 100%;
@@ -208,7 +207,7 @@ export class Layout extends GlimmerComponent<LayoutSignature> {
         gap: var(--boxel-sp-xs) var(--boxel-sp-lg);
       }
       .content-grid {
-        max-width: var(--content-max-width);
+        max-width: var(--content-max-width, 100%);
         padding-left: var(--layout-padding);
         padding-bottom: var(--layout-padding);
       }