diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
index 054b22f7ad8..2076d586823 100644
--- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
@@ -60,7 +60,7 @@ function PhotoCategories() {
   return (
     <TagGroup
       label="Photo categories"
-      styles={style({width: 320})}
+      styles={style({maxWidth: 320})}
       /*- begin highlight -*/
       items={list.items}
       onRemove={(keys) => list.remove(...keys)}>
diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx
index 715d459cdd3..e754da1a821 100644
--- a/packages/dev/s2-docs/pages/s2/TreeView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx
@@ -299,11 +299,11 @@ function Example(props) {
   let [selected, setSelected] = useState<Selection>(new Set());
 
   return (
-    <div>
+    <div className={style({width: 'full'})}>
       <TreeView
         {...props}
         aria-label="Pokemon evolution"
-        styles={style({height: 250, width: 300})}
+        styles={style({height: 250, width: 'full', maxWidth: 300})}
         ///- begin highlight -///
         /* PROPS */
         selectedKeys={selected}