Add display style toggle

src/pages/sandbox.css

@@ -56,6 +56,18 @@
     align-items: safe center;
     justify-content: center;
     overflow-anchor: auto;
+    position: relative;
+
+    container: preview / inline-size;
+    @container preview (inline-size > 400px) {
+      &.narrow {
+        > [class^='status-'],
+        > .status,
+        > *:not(.status-card-link, [class^='status-']) > .status {
+          max-width: 320px !important;
+        }
+      }
+    }
 
     > [class^='status-'],
     > .status,
@@ -235,6 +247,13 @@
       color: var(--text-insignificant-color);
     }
 
+    .toggle-display {
+      display: none;
+      @media (width > calc(400px + 320px)) {
+        display: block;
+      }
+    }
+
     footer {
       margin-top: 2em;
       border-top: 1px solid var(--divider-color);

src/pages/sandbox.jsx

@@ -314,6 +314,7 @@ const INITIAL_STATE = {
   mediaPreference: 'default',
   expandWarnings: false,
   contextType: 'none', // Default context type
+  displayStyle: 'adaptive', // Display style for preview
 };
 
 export default function Sandbox() {
@@ -708,7 +709,7 @@ export default function Sandbox() {
         <h1>Sandbox</h1>
       </header>
       <div
-        class="sandbox-preview"
+        class={`sandbox-preview ${toggleState.displayStyle}`}
         onClickCapture={(e) => {
           const isAllowed = e.target.closest(
             '.media, .media-caption, .spoiler-button, .spoiler-media-button',
@@ -1352,6 +1353,33 @@ export default function Sandbox() {
               </li>
             </ul>
           </li>
+          <li class="toggle-display">
+            <b>Display</b>
+            <ul>
+              <li>
+                <label>
+                  <input
+                    type="radio"
+                    name="displayStyle"
+                    checked={toggleState.displayStyle === 'narrow'}
+                    onChange={() => updateToggles({ displayStyle: 'narrow' })}
+                  />
+                  <span>Narrow</span>
+                </label>
+              </li>
+              <li>
+                <label>
+                  <input
+                    type="radio"
+                    name="displayStyle"
+                    checked={toggleState.displayStyle === 'adaptive'}
+                    onChange={() => updateToggles({ displayStyle: 'adaptive' })}
+                  />
+                  <span>Adaptive</span>
+                </label>
+              </li>
+            </ul>
+          </li>
           <li>
             <h3>User preferences for sensitive content</h3>
             <ul>