From 4c23822a34f18ba2aba3ce3cfd551155e5bba1d8 Mon Sep 17 00:00:00 2001
From: KJ Monahan <kj@forumone.com>
Date: Mon, 24 Nov 2025 09:57:24 -0600
Subject: [PATCH] Miscellanous small fixes backported from MySI

---
 source/00-config/index.css                    |  2 +-
 source/00-config/mixins/accessibility.css     |  2 +-
 source/00-config/mixins/layout.css            | 23 ++++++++-----------
 .../02-layouts/Constrain/constrain.module.css |  2 +-
 source/03-components/Wysiwyg/Wysiwyg.tsx      |  3 ++-
 .../03-components/Wysiwyg/wysiwyg.module.css  |  3 +++
 6 files changed, 18 insertions(+), 17 deletions(-)
 create mode 100644 source/03-components/Wysiwyg/wysiwyg.module.css

diff --git a/source/00-config/index.css b/source/00-config/index.css
index a65e181d..0d21d3f8 100644
--- a/source/00-config/index.css
+++ b/source/00-config/index.css
@@ -1,4 +1,4 @@
-@layer config, global, vendor, layouts, components, utilities;
+@layer config, global, vendor, layouts, components, utility;
 
 @import 'vars/box-shadow.css' layer(config.base);
 @import 'vars/constrain.css' layer(config.base);
diff --git a/source/00-config/mixins/accessibility.css b/source/00-config/mixins/accessibility.css
index 150adcb2..1b672638 100644
--- a/source/00-config/mixins/accessibility.css
+++ b/source/00-config/mixins/accessibility.css
@@ -4,7 +4,7 @@
   @param {Boolean} $important
  */
 @mixin visually-hidden($important: false) {
-  clip-path: rect(1px, 1px, 1px, 1px) iff($important, !important);
+  clip-path: rect(1px 1px 1px 1px) iff($important, !important);
   height: 1px iff($important, !important);
   overflow: hidden iff($important, !important);
   overflow-wrap: normal iff($important, !important);
diff --git a/source/00-config/mixins/layout.css b/source/00-config/mixins/layout.css
index a259a703..d60030b3 100644
--- a/source/00-config/mixins/layout.css
+++ b/source/00-config/mixins/layout.css
@@ -1,28 +1,27 @@
 @mixin layout-align-left($margin) {
-  float: left;
+  float: inline-start;
 
   @if $margin {
-    margin-right: $margin;
+    margin-inline-end: $margin;
   }
 }
 
 @mixin layout-align-right($margin) {
-  float: right;
+  float: inline-end;
 
   @if $margin {
-    margin-left: $margin;
+    margin-inline-start: $margin;
   }
 }
 
 @mixin layout-align-none {
   float: none;
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline: 0;
 }
 
 @mixin layout-constrain() {
   margin-inline: auto;
-  max-width: var(--constrain-md);
+  max-inline-size: var(--constrain-md);
   padding-inline: var(--site-margins);
 
   /**
@@ -38,20 +37,18 @@
   and makes it flush with the edge of the viewport.
  */
 @mixin layout-full-bleed() {
-  left: 50%;
+  inline-size: 100vw;
+  inset-inline: 50%;
   margin-inline: -50vw;
   position: relative;
-  right: 50%;
-  width: 100vw;
 }
 
 /**
   Reverses the above.
  */
 @mixin layout-undo-full-bleed() {
-  left: auto;
+  inline-size: auto;
+  inset-inline: auto;
   margin-inline: 0;
   position: static;
-  right: auto;
-  width: auto;
 }
diff --git a/source/02-layouts/Constrain/constrain.module.css b/source/02-layouts/Constrain/constrain.module.css
index 14f5951e..72620144 100644
--- a/source/02-layouts/Constrain/constrain.module.css
+++ b/source/02-layouts/Constrain/constrain.module.css
@@ -1,6 +1,6 @@
 @import 'mixins';
 
-@layer layout {
+@layer layouts {
   .constrain {
     @include layout-constrain();
   }
diff --git a/source/03-components/Wysiwyg/Wysiwyg.tsx b/source/03-components/Wysiwyg/Wysiwyg.tsx
index f0d1a2d0..82b0f51f 100644
--- a/source/03-components/Wysiwyg/Wysiwyg.tsx
+++ b/source/03-components/Wysiwyg/Wysiwyg.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
 import { JSX, ReactNode } from 'react';
+import styles from './wysiwyg.module.css';
 
 interface WysiwygProps extends GessoComponent {
   children?: ReactNode;
@@ -8,7 +9,7 @@ interface WysiwygProps extends GessoComponent {
 
 function Wysiwyg({ children, modifierClasses }: WysiwygProps): JSX.Element {
   return (
-    <div className={clsx('c-wysiwyg u-clearfix', modifierClasses)}>
+    <div className={clsx(styles.wysiwyg, 'u-clearfix', modifierClasses)}>
       {children}
     </div>
   );
diff --git a/source/03-components/Wysiwyg/wysiwyg.module.css b/source/03-components/Wysiwyg/wysiwyg.module.css
new file mode 100644
index 00000000..6c274cb0
--- /dev/null
+++ b/source/03-components/Wysiwyg/wysiwyg.module.css
@@ -0,0 +1,3 @@
+@layer components {
+  .wysiwyg {}
+}