More consistent use of padding throughout

lib/livebook_web/live/explore_live.ex

@@ -29,7 +29,7 @@ defmodule LivebookWeb.ExploreLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-lg mx-auto space-y-4">
+      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-lg mx-auto space-y-4">
         <div>
           <PageHelpers.title text="Explore" />
           <p class="mt-4 mb-8 text-gray-700">

lib/livebook_web/live/home_live.ex

@@ -50,7 +50,7 @@ defmodule LivebookWeb.HomeLive do
       </:topbar_action>
       <.update_notification version={@new_version} instructions_url={@update_instructions_url} />
       <.memory_notification memory={@memory} app_service_url={@app_service_url} />
-      <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-lg mx-auto space-y-4">
+      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-lg mx-auto space-y-4">
         <div class="flex flex-row space-y-0 items-center pb-4 justify-between">
           <PageHelpers.title text="Home" />
           <div class="hidden sm:flex space-x-2" role="navigation" aria-label="new notebook">
@@ -143,7 +143,7 @@ defmodule LivebookWeb.HomeLive do
     <% end %>
 
     <%= if @live_action == :import do %>
-      <.modal id="import-modal" show class="w-full max-w-xl" patch={@self_path}>
+      <.modal id="import-modal" show class="w-full max-w-4xl" patch={@self_path}>
         <.live_component
           module={LivebookWeb.HomeLive.ImportComponent}
           id="import"

lib/livebook_web/live/home_live/close_session_component.ex

@@ -6,7 +6,7 @@ defmodule LivebookWeb.HomeLive.CloseSessionComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-8">
       <h3 class="text-2xl font-semibold text-gray-800">
         Close session
       </h3>

lib/livebook_web/live/home_live/edit_sessions_component.ex

@@ -6,7 +6,7 @@ defmodule LivebookWeb.HomeLive.EditSessionsComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-8">
       <h3 class="text-2xl font-semibold text-gray-800">
         <%= title(@action) %>
       </h3>

lib/livebook_web/live/home_live/import_component.ex

@@ -4,7 +4,7 @@ defmodule LivebookWeb.HomeLive.ImportComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-5">
       <h3 class="text-2xl font-semibold text-gray-800">
         Import notebook
       </h3>

lib/livebook_web/live/home_live/import_url_component.ex

@@ -27,7 +27,7 @@ defmodule LivebookWeb.HomeLive.ImportUrlComponent do
         </div>
       <% end %>
       <p class="text-gray-700" id="import-from-url">
-        Paste the URL to a .livemd file, to a GitHub file, or to a Gist to import it.
+        Paste the URL to a .livemd file, to a GitHub file, or to a Gist.
       </p>
       <.form
         let={f}

lib/livebook_web/live/hub/edit_live.ex

@@ -29,7 +29,7 @@ defmodule LivebookWeb.Hub.EditLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
+      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-8">
         <div>
           <PageHelpers.title text="Edit Hub" socket={@socket} />
         </div>

lib/livebook_web/live/hub/new_live.ex

@@ -20,7 +20,7 @@ defmodule LivebookWeb.Hub.NewLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
+      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-8">
         <div>
           <PageHelpers.title text="Add Hub" socket={@socket} />
           <p class="mt-4 text-gray-700">

lib/livebook_web/live/layout_helpers.ex

@@ -145,7 +145,7 @@ defmodule LivebookWeb.LayoutHelpers do
           </button>
         <% end %>
         <button
-          class="mt-8 flex items-center group border-l-4 border-transparent"
+          class="mt-6 flex items-center group border-l-4 border-transparent"
           aria_label="user profile"
           phx-click={show_current_user_modal()}
         >

lib/livebook_web/live/live_helpers.ex

@@ -95,7 +95,7 @@ defmodule LivebookWeb.LiveHelpers do
 
     ~H"""
     <.modal id={@id} class="w-full max-w-xl" phx-hook="ConfirmModal" data-js-show={show_modal(@id)}>
-      <div id={"#{@id}-content"} class="p-6 pb-4 flex flex-col" phx-update="ignore">
+      <div id={"#{@id}-content"} class="p-6 flex flex-col" phx-update="ignore">
         <h3 class="text-2xl font-semibold text-gray-800" data-title></h3>
         <p class="mt-8 text-gray-700" data-description></p>
         <label class="mt-6 text-gray-700 flex items-center" data-opt-out>

lib/livebook_web/live/session_live/cell_upload_component.ex

@@ -11,7 +11,7 @@ defmodule LivebookWeb.SessionLive.CellUploadComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-8">
       <h3 class="text-2xl font-semibold text-gray-800">
         Insert image
       </h3>

lib/livebook_web/live/session_live/code_cell_settings_component.ex

@@ -19,7 +19,7 @@ defmodule LivebookWeb.SessionLive.CodeCellSettingsComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-8">
       <h3 class="text-2xl font-semibold text-gray-800">
         Cell settings
       </h3>

lib/livebook_web/live/session_live/delete_section_component.ex

@@ -4,7 +4,7 @@ defmodule LivebookWeb.SessionLive.DeleteSectionComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-8">
       <h3 class="text-2xl font-semibold text-gray-800">
         Delete section
       </h3>

lib/livebook_web/live/session_live/package_search_live.ex

@@ -26,7 +26,7 @@ defmodule LivebookWeb.SessionLive.PackageSearchLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-5">
       <h3 class="text-2xl font-semibold text-gray-800">
         Search packages
       </h3>

lib/livebook_web/live/session_live/persistence_live.ex

@@ -44,7 +44,7 @@ defmodule LivebookWeb.SessionLive.PersistenceLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 flex flex-col space-y-8">
+    <div class="p-6 flex flex-col space-y-8">
       <h3 class="text-2xl font-semibold text-gray-800">
         Save to file
       </h3>

lib/livebook_web/live/session_live/runtime_component.ex

@@ -24,7 +24,7 @@ defmodule LivebookWeb.SessionLive.RuntimeComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 max-w-4xl flex flex-col space-y-5">
+    <div class="p-6 max-w-4xl flex flex-col space-y-5">
       <h3 class="text-2xl font-semibold text-gray-800">
         Runtime settings
       </h3>

lib/livebook_web/live/session_live/secrets_component.ex

@@ -15,7 +15,7 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 max-w-4xl flex flex-col space-y-5">
+    <div class="p-6 max-w-4xl flex flex-col space-y-5">
       <h3 class="text-2xl font-semibold text-gray-800">
         Add secret
       </h3>

lib/livebook_web/live/session_live/shortcuts_component.ex

@@ -145,7 +145,7 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 flex flex-col space-y-3">
+    <div class="p-6 flex flex-col space-y-5">
       <h3 class="text-2xl font-semibold text-gray-800">
         Keyboard shortcuts
       </h3>
@@ -158,7 +158,7 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
         you have editor focus and directly modify the given cell content.
       </p>
       <div class="flex">
-        <form class="mt-4" phx-change="settings" onsubmit="return false;" phx-target={@myself}>
+        <form class="my-2" phx-change="settings" onsubmit="return false;" phx-target={@myself}>
           <.switch_checkbox
             name="basic"
             label="Basic view (essential shortcuts only)"
@@ -200,15 +200,17 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
     assigns = assign(assigns, left: left, right: right)
 
     ~H"""
-    <h3 class="text-lg font-medium text-gray-900 pt-4">
-      <%= @title %>
-    </h3>
-    <div class="mt-2 flex flex-col lg:flex-row lg:space-x-4">
-      <div class="lg:grow">
-        <.shortcuts_section_table shortcuts={@left} platform={@platform} />
-      </div>
-      <div class="lg:w-1/2">
-        <.shortcuts_section_table shortcuts={@right} platform={@platform} />
+    <div class="flex flex-col space-y-3">
+      <h3 class="text-lg font-medium text-gray-900">
+        <%= @title %>
+      </h3>
+      <div class="flex flex-col lg:flex-row lg:space-x-4">
+        <div class="lg:grow">
+          <.shortcuts_section_table shortcuts={@left} platform={@platform} />
+        </div>
+        <div class="lg:w-1/2">
+          <.shortcuts_section_table shortcuts={@right} platform={@platform} />
+        </div>
       </div>
     </div>
     """

lib/livebook_web/live/settings_live.ex

@@ -28,7 +28,7 @@ defmodule LivebookWeb.SettingsLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
+      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-16">
         <!-- System settings section -->
         <div class="flex flex-col space-y-10">
           <div>

lib/livebook_web/live/settings_live/add_file_system_component.ex

@@ -11,68 +11,66 @@ defmodule LivebookWeb.SettingsLive.AddFileSystemComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="p-6 pb-4 max-w-4xl flex flex-col space-y-3">
+    <div class="p-6 flex flex-col space-y-5">
       <h3 class="text-2xl font-semibold text-gray-800">
         Add file system
       </h3>
-      <div class="w-full flex-col space-y-5">
-        <p class="text-gray-700">
-          Configure an AWS S3 bucket as a Livebook file system.
-          Many storage services offer an S3-compatible API and
-          those work as well.
-        </p>
-        <%= if @error_message do %>
-          <div class="error-box">
-            <%= @error_message %>
+      <p class="text-gray-700">
+        Configure an AWS S3 bucket as a Livebook file system.
+        Many storage services offer an S3-compatible API and
+        those work as well.
+      </p>
+      <%= if @error_message do %>
+        <div class="error-box">
+          <%= @error_message %>
+        </div>
+      <% end %>
+      <.form
+        let={f}
+        for={:data}
+        phx-target={@myself}
+        phx-submit="add"
+        phx-change="validate"
+        autocomplete="off"
+        spellcheck="false"
+      >
+        <div class="flex flex-col space-y-4">
+          <div>
+            <div class="input-label">Bucket URL</div>
+            <%= text_input(f, :bucket_url,
+              value: @data["bucket_url"],
+              class: "input",
+              placeholder: "https://s3.[region].amazonaws.com/[bucket]"
+            ) %>
           </div>
-        <% end %>
-        <.form
-          let={f}
-          for={:data}
-          phx-target={@myself}
-          phx-submit="add"
-          phx-change="validate"
-          autocomplete="off"
-          spellcheck="false"
-        >
-          <div class="flex flex-col space-y-4">
-            <div>
-              <div class="input-label">Bucket URL</div>
-              <%= text_input(f, :bucket_url,
-                value: @data["bucket_url"],
+          <div>
+            <div class="input-label">Access Key ID</div>
+            <.with_password_toggle id="access-key-password-toggle">
+              <%= text_input(f, :access_key_id,
+                value: @data["access_key_id"],
                 class: "input",
-                placeholder: "https://s3.[region].amazonaws.com/[bucket]"
+                type: "password"
               ) %>
-            </div>
-            <div>
-              <div class="input-label">Access Key ID</div>
-              <.with_password_toggle id="access-key-password-toggle">
-                <%= text_input(f, :access_key_id,
-                  value: @data["access_key_id"],
-                  class: "input",
-                  type: "password"
-                ) %>
-              </.with_password_toggle>
-            </div>
-            <div>
-              <div class="input-label">Secret Access Key</div>
-              <.with_password_toggle id="secret-access-key-password-toggle">
-                <%= text_input(f, :secret_access_key,
-                  value: @data["secret_access_key"],
-                  class: "input",
-                  type: "password"
-                ) %>
-              </.with_password_toggle>
-            </div>
+            </.with_password_toggle>
           </div>
-          <div class="mt-5 flex justify-end space-x-2">
-            <%= live_patch("Cancel", to: @return_to, class: "button-base button-outlined-gray") %>
-            <button class="button-base button-blue" type="submit" disabled={not data_valid?(@data)}>
-              Add
-            </button>
+          <div>
+            <div class="input-label">Secret Access Key</div>
+            <.with_password_toggle id="secret-access-key-password-toggle">
+              <%= text_input(f, :secret_access_key,
+                value: @data["secret_access_key"],
+                class: "input",
+                type: "password"
+              ) %>
+            </.with_password_toggle>
           </div>
-        </.form>
-      </div>
+        </div>
+        <div class="mt-5 flex space-x-2">
+          <button class="button-base button-blue" type="submit" disabled={not data_valid?(@data)}>
+            Add
+          </button>
+          <%= live_patch("Cancel", to: @return_to, class: "button-base button-outlined-gray") %>
+        </div>
+      </.form>
     </div>
     """
   end