Fix Prettier formatting in spacing docs shortcodes (#42461)

Reformats the SpacingNotation and SpacingResponsive Astro shortcodes to
satisfy docs-prettier-check, fixing the failing Lint CI job on v6-dev.

diff --git a/site/src/components/shortcodes/SpacingNotation.astro b/site/src/components/shortcodes/SpacingNotation.astro
index 0bda0a1dca391ca2e71953beb27684d55bb2ac2b..c9adb2554e5f730acf4ee6e43ebf4522c4d06d4c 100644 (file)
--- a/site/src/components/shortcodes/SpacingNotation.astro
+++ b/site/src/components/shortcodes/SpacingNotation.astro
@@ -67,14 +67,16 @@ const sizeValues = [
 ---
 
 <p>
-  {capitalizedNoun} utilities that apply to all breakpoints, from <code>xs</code> to <code>2xl</code>, have no breakpoint
-  prefix in them. This is because those classes are applied from <code>min-width: 0</code> and up, and thus are not
-  bound by a media query. The remaining breakpoints, however, do include a breakpoint prefix.
+  {capitalizedNoun} utilities that apply to all breakpoints, from <code>xs</code> to <code>2xl</code>, have no
+  breakpoint prefix in them. This is because those classes are applied from <code>min-width: 0</code> and up, and thus are
+  not bound by a media query. The remaining breakpoints, however, do include a breakpoint prefix.
 </p>
 
 <p>
   The classes are named using the format <code>{format}</code> for <code>xs</code> and{' '}
-  <code>{`{breakpoint}:${format}`}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and{' '}
+  <code>{`{breakpoint}:${format}`}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and{
+    ' '
+  }
   <code>2xl</code>.
 </p>
 

diff --git a/site/src/components/shortcodes/SpacingResponsive.astro b/site/src/components/shortcodes/SpacingResponsive.astro
index b619680079953a53648cbc279e39005749c41915..1527ee518c49ef65f62a517eed0a06698575d803 100644 (file)
--- a/site/src/components/shortcodes/SpacingResponsive.astro
+++ b/site/src/components/shortcodes/SpacingResponsive.astro
@@ -25,9 +25,20 @@ const breakpoints = getData('breakpoints')
       {breakpoints.map((breakpoint) => (
         <li>
           {/* prettier-ignore */}
-          <code>.{breakpoint.abbr}{className}-0</code> through <code>.{breakpoint.abbr}{className}-9</code>
+          <code>.{breakpoint.abbr}{className}-0</code> through{' '}
+          <code>
+            .{breakpoint.abbr}
+            {className}-9
+          </code>
           {includeAuto && (
-            <Fragment> and <code>.{breakpoint.abbr}{className}-auto</code></Fragment>
+            <Fragment>
+              {' '}
+              and{' '}
+              <code>
+                .{breakpoint.abbr}
+                {className}-auto
+              </code>
+            </Fragment>
           )}
         </li>
       ))}