Improve layout of react+typescript pages

Author: royalicing

lib/components_guide_web/templates/react_typescript/_nav.html.heex

@@ -1,4 +1,5 @@
 <nav class="">
+  <p class="px-2 pb-6 text-xl italic"><%= "React & TypeScript Guide" %></p>
   <ul class="text-xl" data-links="block p-2 current-page-bold">
     <li><%= link(@conn, "Fundamentals", to: "/react+typescript") %></li>
     <li><%= link(@conn, "Testing", to: "/react+typescript/testing") %></li>

lib/components_guide_web/templates/react_typescript/index.html.eex

@@ -3,16 +3,16 @@
 </header>
 
 <navigable-article class="flex flex-col">
-  <div class="mx-auto grid-flow-col grid grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8" style="--max-width: 46em">
-    <div class="sticky top-0 h-screen pt-16 text-white">
+  <div class="mx-auto grid-flow-col md:grid md:grid-cols-[20rem_minmax(0,var(--max-width))] xl:grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8" style="--max-width: 46em">
+    <div class="md:sticky top-0 md:h-screen pl-4 pt-16 text-white">
       <%= render view_module(@conn), "_nav.html", conn: @conn %>
     </div>
-    <article class="text-white bg-gray-900">
+    <article class="text-white bg-gray-900 px-4 md:px-0">
       <div class="<%= view_module(@conn).article_content_class(@article) %>">
         <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
       </div>
     </article>
-    <aside class="sticky top-0 h-screen" hidden>
+    <aside class="sticky top-0 h-screen hidden xl:block" hidden>
       <nav class="pt-16 text-gray-200">
         <div class="pl-5 pb-2 font-bold uppercase text-white">On this page</div>
         <slot name="nav-items">