Add a clarification for editor shortcuts (#1460)

Co-authored-by: José Valim <jose.valim@dashbit.co>

lib/livebook_web/live/live_helpers.ex

@@ -291,11 +291,10 @@ defmodule LivebookWeb.LiveHelpers do
       )
 
     ~H"""
-    <div class="flex items-center gap-1 justify-between">
+    <div class="flex items-center gap-1 sm:gap-3 justify-between">
       <%= if @label do %>
         <span class="text-gray-700"><%= @label %></span>
       <% end %>
-      <div>
       <label class={"switch-button #{if(@disabled, do: "switch-button--disabled")}"}>
         <input type="hidden" value="false" name={@name} />
         <input
@@ -309,7 +308,6 @@ defmodule LivebookWeb.LiveHelpers do
         <div class="switch-button__bg"></div>
       </label>
     </div>
-    </div>
     """
   end
 

lib/livebook_web/live/session_live/shortcuts_component.ex

@@ -175,6 +175,7 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
       />
       <.shortcuts_section
         title="Insert mode"
+        description="Shortcuts in the code editor match Visual Studio Code. Here is a summary (US keyboard layout)."
         shortcuts={@shortcuts.insert_mode}
         basic={@basic}
         platform={@platform}
@@ -198,13 +199,22 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
       end
 
     {left, right} = split_in_half(shortcuts)
-    assigns = assign(assigns, left: left, right: right)
+
+    assigns =
+      assigns
+      |> assign(left: left, right: right)
+      |> assign_new(:description, fn -> nil end)
 
     ~H"""
     <div class="flex flex-col space-y-3">
       <h3 class="text-lg font-medium text-gray-900">
         <%= @title %>
       </h3>
+      <%= if @description do %>
+        <div class="text-gray-700">
+          <%= @description %>
+        </div>
+      <% end %>
       <div class="flex flex-col lg:flex-row lg:space-x-4">
         <div class="lg:grow">
           <.shortcuts_section_table shortcuts={@left} platform={@platform} />