Fix mobile styling for example text (#1429)

Author: josh-collinsworth

examples/_components/SnippetComponent.tsx

@@ -1,5 +1,5 @@
-import { ExampleSnippet } from "../types.ts";
 import Prism from "prismjs";
+import { ExampleSnippet } from "../types.ts";
 
 export default function SnippetComponent(props: {
   filename: string;
@@ -13,9 +13,11 @@ export default function SnippetComponent(props: {
   return (
     <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
       <div
-        class={`italic text-right select-none text-sm ${
+        class={`italic select-none text-sm text-balance ${
           props.snippet.text ? "pb-4 mt-4 md:pb-0 " : " "
-        } ${props.snippet.code ? "col-span-3" : "mt-4 col-span-full"}`}
+        } ${
+          props.snippet.code ? "col-span-5 sm:col-span-3" : "mt-4 col-span-full"
+        }`}
       >
         {props.snippet.text}
       </div>

examples/_pages/ExamplePage.tsx

@@ -17,7 +17,7 @@ export default function ExamplePage({ example }: Props) {
   }`;
 
   return (
-    <>
+    <div data-content="example">
       <div class="flex flex-col gap-4 md:flex-row justify-between items-start md:items-center relative">
         <div class="flex flex-col gap-2">
           {example.parsed.description && (
@@ -37,7 +37,7 @@ export default function ExamplePage({ example }: Props) {
           Edit on Github
         </a>
       </div>
-      <div class="relative block">
+      <div class="relative block mt-8">
         <CopyButton text={contentNoCommentary} />
       </div>
       {example.parsed.files.map((file) => (
@@ -122,6 +122,6 @@ export default function ExamplePage({ example }: Props) {
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }

overrides.css

@@ -34,6 +34,10 @@ that are generated by deno_doc, the tool that powers the API reference documenta
     @apply -mx-4 !important;
   }
 
+  [data-content="example"] .markdown-body .highlight {
+    @apply m-0 !important;
+  }
+
   .ddoc .markdown-body pre > code:first-child {
     @apply px-4 !important;
   }