From c0b18f6580368b5738e599d9fea60f02a8c13a79 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:13:05 -0400
Subject: [PATCH] Round `--content-width-*` and use in the docs (#1526)

* use `--content-width-*` properties for docs

* round `--content-width-*` values to prevent rendering bugs
---
 packages/webawesome/docs/assets/styles/docs.css  | 10 +++++-----
 packages/webawesome/docs/assets/styles/utils.css | 11 ++++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 0a5a7a161..88aeb67a5 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -263,7 +263,7 @@ wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
 
 /* Main content */
 wa-page > main {
-  max-width: 80ch;
+  max-width: var(--content-width-s);
   padding: var(--wa-space-xl);
   margin-inline: auto;
 }
@@ -371,7 +371,7 @@ h1.title {
 
 /* Search list pages */
 wa-page > main:has(> .search-list) {
-  max-width: 120ch;
+  max-width: var(--content-width-l);
   margin-inline: auto;
 }
 
@@ -586,7 +586,7 @@ wa-scroller:has(.component-table) {
 
   .table-arguments,
   .table-description {
-    min-width: 40ch;
+    min-width: var(--line-length-xs);
   }
 
   .table-reflect {
@@ -635,10 +635,10 @@ wa-scroller:has(.component-table) {
 
 .page-wide {
   wa-page > main {
-    max-width: 140ch;
+    max-width: var(--content-width-l);
 
     .max-line-length {
-      max-width: 80ch;
+      max-width: var(--line-length-l);
     }
   }
 }
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index 9e4e87951..aadba9e93 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -4,11 +4,12 @@
 
 @layer wa-utils {
   :root {
-    /* max-width for fixed width app-based pages */
-    --content-width-l: 132ch;
-    --content-width-m: 110ch;
-    --content-width-s: 80ch;
-    --content-width-xs: 50ch;
+    /* max-width for fixed width app-based pages
+     * We round() these to avoid obscure component rendering bugs caused by widths with fractional pixels */
+    --content-width-l: round(up, 132ch, 1px);
+    --content-width-m: round(up, 110ch, 1px);
+    --content-width-s: round(up, 80ch, 1px);
+    --content-width-xs: round(up, 50ch, 1px);
     --content-padding-inline: 4ch;
     --content-flow-spacing: 8ch;