diff --git a/MyApp.ServiceInterface/BackgroundMqServices.cs b/MyApp.ServiceInterface/BackgroundMqServices.cs
index 13253e7..0abf3b3 100644
--- a/MyApp.ServiceInterface/BackgroundMqServices.cs
+++ b/MyApp.ServiceInterface/BackgroundMqServices.cs
@@ -125,13 +125,13 @@ public async Task Any(DbWrites request)
 
     public async Task Any(AnalyticsTasks request)
     {
-        if (request.RecordPostView != null && !Stats.IsAdminOrModerator(request.RecordPostView.UserName))
+        if (request.RecordPostView != null)// && !Stats.IsAdminOrModerator(request.RecordPostView.UserName))
         {
             using var analyticsDb = HostContext.AppHost.GetDbConnection(Databases.Analytics);
             await analyticsDb.InsertAsync(request.RecordPostView);
         }
 
-        if (request.RecordSearchView != null && !Stats.IsAdminOrModerator(request.RecordSearchView.UserName))
+        if (request.RecordSearchView != null)// && !Stats.IsAdminOrModerator(request.RecordSearchView.UserName))
         {
             using var analyticsDb = HostContext.AppHost.GetDbConnection(Databases.Analytics);
             await analyticsDb.InsertAsync(request.RecordSearchView);
diff --git a/MyApp/Components/Pages/Home.razor b/MyApp/Components/Pages/Home.razor
index 2144c32..8fda819 100644
--- a/MyApp/Components/Pages/Home.razor
+++ b/MyApp/Components/Pages/Home.razor
@@ -5,7 +5,7 @@
 
 <PageTitle>pvq.app</PageTitle>
 
-<div class="flex flex-wrap justify-center">
+<div class="sm:flex flex-wrap justify-center px-2">
     <div>
         @if (Html != null)
         {
diff --git a/MyApp/Components/Pages/Questions/Ask.razor b/MyApp/Components/Pages/Questions/Ask.razor
index 59cd37b..f6e78ea 100644
--- a/MyApp/Components/Pages/Questions/Ask.razor
+++ b/MyApp/Components/Pages/Questions/Ask.razor
@@ -1,7 +1,7 @@
 @page "/questions/ask"
 
 <PageTitle>@Title</PageTitle>
-<div class="flex flex-wrap justify-center">
+<div class="sm:flex flex-wrap justify-center px-2">
     <div>
         <div class="mt-8 mb-20 mx-auto sm:max-w-4xl sm:w-[56rem] xl:max-w-5xl xl:w-[64rem]">
             <div class="mb-4">
@@ -10,7 +10,7 @@
                 </h1>
             </div>
         </div>
-        <div class="w-[56rem]" data-component="pages/Questions/Ask.mjs"></div>
+        <div class="sm:w-[56rem]" data-component="pages/Questions/Ask.mjs"></div>
     </div>
     <Aside/>
 </div>
diff --git a/MyApp/Components/Pages/Questions/Index.razor b/MyApp/Components/Pages/Questions/Index.razor
index 0fe4465..c4c90f3 100644
--- a/MyApp/Components/Pages/Questions/Index.razor
+++ b/MyApp/Components/Pages/Questions/Index.razor
@@ -3,7 +3,7 @@
 @inject IMessageProducer MessageProducer
 
 <PageTitle>@Title</PageTitle>
-<div class="flex flex-wrap justify-center">
+<div class="sm:flex flex-wrap justify-center px-2">
     <div>
         @if (posts != null)
         {
@@ -20,7 +20,7 @@
                                 <h4 class="mt-4 text-2xl">results for '@Q'</h4>
                             }
                         </div>
-                        <div class="w-96 text-right">
+                        <div class="w-full sm:w-96 text-right">
                             <div class="mb-4">
                                 <NavLink class=@PrimaryButton.Classes(ButtonStyle.Indigo) href="questions/ask">Ask Question</NavLink>
                             </div>
diff --git a/MyApp/Components/Pages/Questions/Question.razor b/MyApp/Components/Pages/Questions/Question.razor
index 7a8e4c1..4e1d975 100644
--- a/MyApp/Components/Pages/Questions/Question.razor
+++ b/MyApp/Components/Pages/Questions/Question.razor
@@ -9,7 +9,7 @@
 
 <PageTitle>@title</PageTitle>
 
-<div class="flex flex-wrap justify-center">
+<div class="lg:flex flex-wrap justify-center px-2">
     <div>
         @if (Html != null)
         {
diff --git a/MyApp/Components/Shared/Aside.razor b/MyApp/Components/Shared/Aside.razor
index 6b1f5cb..7af6a5a 100644
--- a/MyApp/Components/Shared/Aside.razor
+++ b/MyApp/Components/Shared/Aside.razor
@@ -1,6 +1,6 @@
 @inject MarkdownBlog Blog
 
-<div class="hidden lg:block w-72 ml-8 pt-24">
+<div class="w-72 ml-8 pt-24 pb-12">
     <div>
         <div class="flex">
             <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M192 32c0 17.7 14.3 32 32 32c123.7 0 224 100.3 224 224c0 17.7 14.3 32 32 32s32-14.3 32-32C512 128.9 383.1 0 224 0c-17.7 0-32 14.3-32 32m0 96c0 17.7 14.3 32 32 32c70.7 0 128 57.3 128 128c0 17.7 14.3 32 32 32s32-14.3 32-32c0-106-86-192-192-192c-17.7 0-32 14.3-32 32m-96 16c0-26.5-21.5-48-48-48S0 117.5 0 144v224c0 79.5 64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144h-16v96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48s-48-21.5-48-48z"/></svg>
diff --git a/MyApp/Components/Shared/Footer.razor b/MyApp/Components/Shared/Footer.razor
index 3ae0984..06d416a 100644
--- a/MyApp/Components/Shared/Footer.razor
+++ b/MyApp/Components/Shared/Footer.razor
@@ -1,6 +1,6 @@
 <footer class="bg-accent-1 dark:bg-black border-t border-accent-2 dark:border-gray-600">
 
-    <nav class="pt-8 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer">
+    <nav class="pt-8 columns-2 sm:flex sm:justify-center sm:space-x-12 text-center sm:text-left" aria-label="Footer">
         <div class="pb-6">
             <NavLink href="about" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:underline">About</NavLink>
         </div>
diff --git a/MyApp/Components/Shared/Header.razor b/MyApp/Components/Shared/Header.razor
index 7dc122c..50aba5e 100644
--- a/MyApp/Components/Shared/Header.razor
+++ b/MyApp/Components/Shared/Header.razor
@@ -16,7 +16,7 @@
             <nav class="relative flex flex-grow leading-6 font-semibold text-slate-700 dark:text-slate-200">
                 <ul class="flex flex-wrap items-center justify-end w-full m-0">
 
-                    <li class="relative flex flex-wrap just-fu-start m-0 w-52 sm:w-96 pr-4">
+                    <li class="relative flex flex-wrap just-fu-start m-0 w-52 sm:w-96 sm:pr-4">
                         <form class="w-full" method="get" action="questions">
                             <input type="text" name="q" class="@TextInput.InputClasses" placeholder="Search..." value=@Q />
                             <input type="submit" class="hidden" />
diff --git a/MyApp/Components/Shared/HomeTab.razor b/MyApp/Components/Shared/HomeTab.razor
index f960a37..f09be85 100644
--- a/MyApp/Components/Shared/HomeTab.razor
+++ b/MyApp/Components/Shared/HomeTab.razor
@@ -5,7 +5,7 @@
             <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
                 <span class="block xl:inline"><span class="md:inline hidden">Top </span>Questions</span>
             </h1>
-            <div class="w-96 text-right">
+            <div class="w-full sm:w-96 text-right">
                 <div class="mb-4">
                     <NavLink class=@PrimaryButton.Classes(ButtonStyle.Indigo) href="questions/ask">Ask Question</NavLink>
                 </div>
diff --git a/MyApp/Components/Shared/QuestionPost.razor b/MyApp/Components/Shared/QuestionPost.razor
index 58c2708..c3a6c11 100644
--- a/MyApp/Components/Shared/QuestionPost.razor
+++ b/MyApp/Components/Shared/QuestionPost.razor
@@ -7,7 +7,7 @@
 
 <div class="mt-8 mb-20 mx-auto sm:max-w-4xl sm:w-[56rem] xl:max-w-5xl xl:w-[64rem]" data-module="mjs/question.mjs">
     <article data-postid=@Question.Id>
-        <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
+        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 lg:text-4xl xl:text-5xl">
             <span class="block xl:inline">@Question.Post.Title</span>
         </h1>
         <div class="my-4 py-2 flex justify-between border-b border-gray-200 dark:border-gray-700">
@@ -31,7 +31,7 @@
             @if (Question.Post.CreatedBy != null)
             {
                 <div class="flex mr-4">
-                    <img id="user-avatar" class="h-8 w-8 rounded-full" src="/avatar/@Question.Post.CreatedBy" alt=@($"{Question.Post.CreatedBy} avatar")>
+                    <img id="user-avatar" class="h-6 w-6 sm:h-8 sm:w-8 rounded-full bg-contain" src="/avatar/@Question.Post.CreatedBy" alt=@($"{Question.Post.CreatedBy} avatar")>
                     <div>
                         <b class="ml-2">@Question.Post.CreatedBy</b>
                     </div>
@@ -39,17 +39,16 @@
             }
         </div>
         <div class="flex">
-
             <div class="w-20">
-                <div id="@Question.Post.Id" class="voting flex flex-col items-center">
+                <div id="@Question.Post.Id" class="voting flex flex-col items-center pr-2">
                     <!-- bx:up-arrow bxs:up-arrow <path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19"/> -->
-                    <svg class="up w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
+                    <svg class="up w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
                     <b class="score text-xl" data-score=@Question.QuestionScore>@Question.QuestionScore</b>
                     <!-- bx:down-arrow bxs:down-arrow <path fill="currentColor" d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569z"/> -->
-                    <svg class="down w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
+                    <svg class="down w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
                 </div>
             </div>
-            <div id="question" class="flex-grow prose">
+            <div id="question" class="lg:flex-grow prose">
                 @BlazorHtml.Raw(Markdown.GenerateHtml(Question.Post.Body))
             </div>
         </div>
@@ -99,21 +98,21 @@
             {
                 <div class="py-8 border-b border-gray-200 dark:border-gray-700">
                     <div class="flex">
-                        <div class="w-32">
+                        <div class="md:w-32 pr-2">
                             <div id=@answer.Id class="voting flex flex-col items-center">
-                                <svg class="up w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
+                                <svg class="up w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
                                 <b class="score text-xl" data-score=@Question.GetAnswerScore(answer.Id)>@Question.GetAnswerScore(answer.Id)</b>
-                                <svg class="down w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
+                                <svg class="down w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
                             </div>
                             @{
                                 var user = AppConfig.GetApplicationUser(answer.Model);
                             }
                             <div class="mt-8 flex flex-col items-center">
-                                <img class="w-20 h-20 inline-block" src="@user.UserName.GetAvatarUrl()">
-                                <div class="text-center whitespace-nowrap text-sm font-semibold">@user.UserName</div>
+                                <img class="w-10 h-10 xl:w-20 xl:h-20 bg-cover inline-block" src="@user.UserName.GetAvatarUrl()">
+                                <div class="hidden md:block text-center whitespace-nowrap text-xs xl:text-sm font-semibold">@user.UserName</div>
                             </div>
                         </div>
-                        <div class="flex-grow prose">
+                        <div class="xl:flex-grow prose">
                             @BlazorHtml.Raw(Markdown.GenerateHtml(answer.Choices.FirstOrDefault()?.Message.Content))
                         </div>
                     </div>
diff --git a/MyApp/Components/Shared/QuestionPosts.razor b/MyApp/Components/Shared/QuestionPosts.razor
index 335d71f..6a72912 100644
--- a/MyApp/Components/Shared/QuestionPosts.razor
+++ b/MyApp/Components/Shared/QuestionPosts.razor
@@ -2,8 +2,8 @@
 <div>
     @foreach (var post in Posts)
     {
-        <div class="flex sm:space-x-6 border-b border-gray-200 dark:border-gray-700 py-4">
-            <div class="hidden sm:flex flex-col text-center align-middle shrink-0 w-28">
+        <div class="flex sm:space-x-6 border-b border-gray-200 dark:border-gray-700 py-4 max-w-full">
+            <div class="hidden md:flex flex-col text-center align-middle shrink-0 w-28">
                 @if (post.PostTypeId == 2)
                 {
                     <div class="pt-4 w-full flex justify-center">
@@ -35,14 +35,14 @@
                     <div class="text-gray-600 dark:text-gray-300 whitespace-nowrap">@post.ViewCount.ToHumanReadable() views</div>
                 }
             </div>
-            <div class="flex flex-auto flex-col">
+            <div>
                 <div>
-                    <h4 class="font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-500 text-lg">
+                    <h4 class="font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-500 sm:text-lg">
                         <NavLink href=@GetHref(post)>@post.Title</NavLink>
                     </h4>
                     <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">@post.Summary</p>
                 </div>
-                <div class="mt-6 flex flex-1 items-end">
+                <div class="mt-6 flex sm:flex-1 items-end">
                     <dl class="flex space-x-4 divide-x divide-gray-200 dark:divide-gray-800 text-sm sm:space-x-6 w-full">
                         <div class="flex flex-wrap gap-x-2 gap-y-2">
                             @foreach (var tag in post.Tags.Safe())
@@ -51,7 +51,7 @@
                             }
                         </div>
                         <div class="flex flex-grow px-4 sm:px-6 text-xs justify-end">
-                            <dt class="font-medium text-gray-600 dark:text-gray-300">Modified</dt>
+                            <dt class="hidden sm:inline font-medium text-gray-600 dark:text-gray-300">Modified</dt>
                             <dd class="ml-2 text-gray-600 dark:text-gray-300 whitespace-nowrap">
                                 @(post.GetModifiedDate().ToString("dd MMMM yyyy h:mm:ss tt"))
                             </dd>
diff --git a/MyApp/Components/Shared/QuestionViewTabs.razor b/MyApp/Components/Shared/QuestionViewTabs.razor
index 51d132c..9b13657 100644
--- a/MyApp/Components/Shared/QuestionViewTabs.razor
+++ b/MyApp/Components/Shared/QuestionViewTabs.razor
@@ -2,7 +2,7 @@
 <div class="flex-grow max-w-sm">
     <div class="sm:hidden">
         <label for="tabs" class="sr-only">Select a tab</label>
-        <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 dark:border-gray-600 focus:border-indigo-500 focus:ring-indigo-500" onchange="location.href='@Path.AddQueryParam("tab","")' + this.value">
+        <select id="tabs" name="tabs" class="block sm:w-full rounded-md border-gray-300 dark:border-gray-600 focus:border-indigo-500 focus:ring-indigo-500" onchange="location.href='@Path.AddQueryParam("tab","")' + this.value">
             @foreach (var tab in Tabs)
             {
                 if (tab == Active)
diff --git a/MyApp/tailwind.config.js b/MyApp/tailwind.config.js
index 5e339f6..c18e14d 100644
--- a/MyApp/tailwind.config.js
+++ b/MyApp/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  content: ["./**/*.{html,js,mjs,md,cshtml,razor,cs}","./Pages/**/*.{cshtml,razor}","./Css.cs"],
+  content: ["./**/*.{html,js,mjs,md,cshtml,razor,cs}","./Components/**/*.{cshtml,razor}","./Css.cs"],
   darkMode: 'class',
   theme: {
     extend: {
diff --git a/MyApp/tailwind.input.css b/MyApp/tailwind.input.css
index af58f60..484e37b 100644
--- a/MyApp/tailwind.input.css
+++ b/MyApp/tailwind.input.css
@@ -51,6 +51,9 @@ select{
 [type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}
 [type='file']:focus{outline:1px auto -webkit-focus-ring-color;}
 
+.dark [type='text'],.dark [type='email'],.dark [type='url'],.dark [type='password'],.dark [type='number'],.dark [type='date'],.dark [type='month'],.dark [type='search'],.dark [type='tel'],.dark [type='time'],.dark [type='checkbox'],.dark [type='radio'],.dark [multiple],.dark textarea,.dark select {
+    background-color: #000;
+}
 
 /* @tailwindcss/aspect css */
 .aspect-h-9 {
diff --git a/MyApp/wwwroot/css/app.css b/MyApp/wwwroot/css/app.css
index 1646eaa..ba49255 100644
--- a/MyApp/wwwroot/css/app.css
+++ b/MyApp/wwwroot/css/app.css
@@ -765,6 +765,10 @@ select{
   outline:1px auto -webkit-focus-ring-color;
 }
 
+.dark [type='text'],.dark [type='email'],.dark [type='url'],.dark [type='password'],.dark [type='number'],.dark [type='date'],.dark [type='month'],.dark [type='search'],.dark [type='tel'],.dark [type='time'],.dark [type='checkbox'],.dark [type='radio'],.dark [multiple],.dark textarea,.dark select {
+  background-color: #000;
+}
+
 /* @tailwindcss/aspect css */
 
 .aspect-h-9 {
@@ -1514,10 +1518,6 @@ select{
   flex: 1 1 0%;
 }
 
-.flex-auto {
-  flex: 1 1 auto;
-}
-
 .flex-none {
   flex: none;
 }
@@ -2207,6 +2207,14 @@ select{
   --tw-bg-opacity: 0.75;
 }
 
+.bg-contain {
+  background-size: contain;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
 .fill-gray-300 {
   fill: #d1d5db;
 }
@@ -2372,6 +2380,10 @@ select{
   padding-bottom: 0.375rem;
 }
 
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
 .pb-16 {
   padding-bottom: 4rem;
 }
@@ -4412,6 +4424,10 @@ select{
     display: inline-block;
   }
 
+  .sm\:inline {
+    display: inline;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -4436,6 +4452,10 @@ select{
     height: 11rem;
   }
 
+  .sm\:h-8 {
+    height: 2rem;
+  }
+
   .sm\:h-screen {
     height: 100vh;
   }
@@ -4448,6 +4468,10 @@ select{
     width: 11rem;
   }
 
+  .sm\:w-8 {
+    width: 2rem;
+  }
+
   .sm\:w-96 {
     width: 24rem;
   }
@@ -4599,6 +4623,10 @@ select{
     padding-top: 0.25rem;
   }
 
+  .sm\:pr-4 {
+    padding-right: 1rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -4672,6 +4700,10 @@ select{
     display: inline;
   }
 
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:inline-flex {
     display: inline-flex;
   }
@@ -4684,6 +4716,10 @@ select{
     display: grid;
   }
 
+  .md\:w-32 {
+    width: 8rem;
+  }
+
   .md\:max-w-xl {
     max-width: 36rem;
   }
@@ -4802,6 +4838,10 @@ select{
     max-width: 768px;
   }
 
+  .lg\:flex-grow {
+    flex-grow: 1;
+  }
+
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -4849,6 +4889,11 @@ select{
     padding-top: 6rem;
   }
 
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .lg\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;
@@ -4883,6 +4928,14 @@ select{
     display: table-cell;
   }
 
+  .xl\:h-20 {
+    height: 5rem;
+  }
+
+  .xl\:w-20 {
+    width: 5rem;
+  }
+
   .xl\:w-\[64rem\] {
     width: 64rem;
   }
@@ -4898,6 +4951,20 @@ select{
   .xl\:max-w-screen-lg {
     max-width: 1024px;
   }
+
+  .xl\:flex-grow {
+    flex-grow: 1;
+  }
+
+  .xl\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .xl\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
 
 @media (min-width: 1536px) {
diff --git a/MyApp/wwwroot/css/typography.css b/MyApp/wwwroot/css/typography.css
index b42d425..c9e7d80 100644
--- a/MyApp/wwwroot/css/typography.css
+++ b/MyApp/wwwroot/css/typography.css
@@ -84,6 +84,11 @@
         line-height: 1.3333333;
     }
 }
+@media (max-width: 1024px) {
+    .prose :where(pre):not(:where([class~="not-prose"] *)) {
+        min-width: unset;
+    }
+}
 
 /* custom containers */
 .copy p, .copy p code { color:#fff }