replace custom max-width with 100% (#2034)

* replace custom max-width with 100% * apply max-width 1040px to blog-app experiments-realm
cardstack · Jan 16, 2025 · 3106435 · 3106435
1 parent d6d07da
commit 3106435
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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);
       }