Feature: Split test smaller lesson content font size. (#3976)

Because:
* We are forcing larger font size on all users when it should be left as
a choice.
* Larger text accentuates and makes other things harder to get right -
it had a part to play in the difficulty styling our links.

When enabled:
<img width="1286" alt="Screenshot 2023-07-14 at 16 02 12"
src="https://github.com/TheOdinProject/theodinproject/assets/7963776/f8876ad9-f579-4766-87d0-20339db89f46">

When disabled (the default):
<img width="1316" alt="Screenshot 2023-07-14 at 16 02 24"
src="https://github.com/TheOdinProject/theodinproject/assets/7963776/06d5d126-ec23-4b53-99d8-dd20485417a0">


This commit:
* Experiment with using a baseline 16px font size.
  * Only 50% of users will see it so we can monitor feedback.
* The best feedback for this is probably no feedback. The right font
size is table stakes, if no one notices the change it will likely be a
good thing.

app/components/content_container_component.html.erb

@@ -1,3 +1,3 @@
- <div class="lesson-content max-w-prose mx-auto prose md:prose-lg prose-gray prose-a:text-blue-800 visited:prose-a:text-purple-800 prose-code:bg-gray-100 prose-code:p-1 prose-code:font-normal dark:prose-a:text-blue-300 dark:visited:prose-a:text-purple-300 dark:prose-code:bg-gray-700/40 prose-code:rounded-md break-words line-numbers dark:prose-invert dark:antialiased prose-pre:rounded-xl prose-pre:bg-slate-800 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/70 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 <%= classes %>" data-controller="syntax-highlighting diagramming" <%= html_data_attributes_for(data_attributes) %>>
+ <div class="lesson-content max-w-prose mx-auto prose <%= font_size %> prose-gray prose-a:text-blue-800 visited:prose-a:text-purple-800 prose-code:bg-gray-100 prose-code:p-1 prose-code:font-normal dark:prose-a:text-blue-300 dark:visited:prose-a:text-purple-300 dark:prose-code:bg-gray-700/40 prose-code:rounded-md break-words line-numbers dark:prose-invert dark:antialiased prose-pre:rounded-xl prose-pre:bg-slate-800 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/70 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 <%= classes %>" data-controller="syntax-highlighting diagramming" <%= html_data_attributes_for(data_attributes) %>>
   <%= content %>
  </div>

app/components/content_container_component.rb

@@ -1,10 +1,17 @@
 class ContentContainerComponent < ApplicationComponent
-  def initialize(classes: '', data_attributes: {})
+  def initialize(classes: '', data_attributes: {}, current_user: nil)
     @classes = classes
     @data_attributes = data_attributes
+    @current_user = current_user
   end
 
   private
 
-  attr_reader :classes, :data_attributes
+  attr_reader :classes, :data_attributes, :current_user
+
+  def font_size
+    return '' if current_user && Feature.enabled?(:lesson_content_font_size, current_user)
+
+    'md:prose-lg'
+  end
 end

app/views/lessons/show.html.erb

@@ -7,7 +7,7 @@
 
     <main class="grid grid-cols-12 gap-x-6" data-controller="lesson-toc" data-lesson-toc-item-classes-value="no-underline hover:text-gray-800 text-sm dark:hover:text-gray-300">
       <article class="col-span-full xl:col-span-7 xl:col-start-2">
-        <%= render ContentContainerComponent.new(classes: 'xl:mx-0', data_attributes: { lesson_toc_target: 'lessonContent' }) do %>
+        <%= render ContentContainerComponent.new(classes: 'xl:mx-0', data_attributes: { lesson_toc_target: 'lessonContent' }, current_user:) do %>
           <%= @lesson.body.html_safe %>
         <% end %>
       </article>