From 344224fccdef2f3a37ed931c512e400b47301ea2 Mon Sep 17 00:00:00 2001
From: Dylan Smith <dylanatsmith@github.com>
Date: Fri, 9 Jun 2023 18:40:23 +0100
Subject: [PATCH] Add width utility to limit line length for readability
 (#2410)

* Add class to limit max-width to 65ch

* Update layout.md with example of new class

* Update layout.scss

* Create .changeset/shy-cats-hug.md

---------

Co-authored-by: simurai <simurai@github.com>
---
 .changeset/shy-cats-hug.md       |  5 +++++
 docs/content/utilities/layout.md |  8 ++++++++
 src/utilities/layout.scss        | 10 ++++++----
 3 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/shy-cats-hug.md

diff --git a/.changeset/shy-cats-hug.md b/.changeset/shy-cats-hug.md
new file mode 100644
index 0000000000..50b8fee6a2
--- /dev/null
+++ b/.changeset/shy-cats-hug.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add width utility to limit line length for readability
diff --git a/docs/content/utilities/layout.md b/docs/content/utilities/layout.md
index d941802f69..be98f26a72 100644
--- a/docs/content/utilities/layout.md
+++ b/docs/content/utilities/layout.md
@@ -204,6 +204,14 @@ Use `.width-auto` to reset width to `auto` (initial value). Typically used with
 </div>
 ```
 
+Use `.width-comfortable` to set width to `65ch`. This can be used on text elements to shorten the line length for better readability.
+
+```html live
+<p class="width-comfortable">
+  Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
+</p>
+```
+
 Use `.height-fit` to set max-height 100%.
 
 ```html live
diff --git a/src/utilities/layout.scss b/src/utilities/layout.scss
index 6837b9a94c..7b6e963565 100644
--- a/src/utilities/layout.scss
+++ b/src/utilities/layout.scss
@@ -71,13 +71,15 @@
 // Width and height utilities, helpful in combination
 // with display-table utilities and images
 /* Max width 100% */
-.width-fit   { max-width: 100% !important; }
+.width-fit         { max-width: 100% !important; }
 /* Set the width to 100% */
-.width-full  { width: 100% !important; }
+.width-full        { width: 100% !important; }
+/* Set the max-width to 65 characters */
+.width-comfortable { max-width: 65ch !important; }
 /* Max height 100% */
-.height-fit  { max-height: 100% !important; }
+.height-fit        { max-height: 100% !important; }
 /* Set the height to 100% */
-.height-full { height: 100% !important; }
+.height-full       { height: 100% !important; }
 
 /* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }