Improve v2 mobile onboarding experience + fix margins between paragraphs (#5709)

* render tabs in a 2x2 grid on mobile

* margins

* fix test

Author: RobertJoonas

lib/plausible_web/live/components/verification.ex

@@ -79,14 +79,13 @@ defmodule PlausibleWeb.Live.Components.Verification do
       <div class="mt-8">
         <.title>Success!</.title>
         <p class="text-sm mt-4">
-          Your installation is working and visitors are being counted accurately
-        </p>
-        <p :if={@awaiting_first_pageview?} id="awaiting" class="text-sm mt-4 animate-pulse">
-          Awaiting your first pageview
+          Your installation is working and visitors are being counted accurately.
+          <span :if={@awaiting_first_pageview?} id="awaiting" class="text-sm mt-4 animate-pulse">
+            Awaiting your first pageview...
+          </span>
         </p>
       </div>
       <.button_link
-        mt?={false}
         href={"/#{URI.encode_www_form(@domain)}?skip_to_dashboard=true"}
         class="w-full font-bold mb-4"
       >

lib/plausible_web/live/installationv2.ex

@@ -123,7 +123,7 @@ defmodule PlausibleWeb.Live.InstallationV2 do
             </div>
           </:loading>
 
-          <div class="flex flex-row gap-2 bg-gray-100 dark:bg-gray-900 rounded-md p-1">
+          <div class="grid grid-cols-2 sm:flex sm:flex-row gap-2 bg-gray-100 dark:bg-gray-900 rounded-md p-1">
             <.tab
               patch={"?type=manual&flow=#{@flow}"}
               selected={@installation_type.result == "manual"}

lib/plausible_web/live/installationv2/instructions.ex

@@ -12,7 +12,7 @@ defmodule PlausibleWeb.Live.InstallationV2.Instructions do
       Script installation
     </.title>
 
-    <div class="text-sm mt-4 leading-6">
+    <div class="text-sm my-4 leading-6">
       Paste this snippet into the <code>&lt;head&gt;</code>
       section of your site. See our
       <.styled_link href="https://plausible.io/docs/integration-guides" new_tab={true}>
@@ -98,12 +98,14 @@ defmodule PlausibleWeb.Live.InstallationV2.Instructions do
       WordPress installation
     </.title>
     <div class="text-sm mt-4 leading-6">
-      <span :if={@recommended_installation_type == "wordpress"}>
-        We've detected your website is using WordPress. Here's how to integrate Plausible:
-      </span>
-      <span :if={@recommended_installation_type != "wordpress"}>
-        Using Wordpress? Here's how to integrate Plausible:
-      </span>
+      <div class="mb-4">
+        <span :if={@recommended_installation_type == "wordpress"}>
+          We've detected your website is using WordPress. Here's how to integrate Plausible:
+        </span>
+        <span :if={@recommended_installation_type != "wordpress"}>
+          Using Wordpress? Here's how to integrate Plausible:
+        </span>
+      </div>
       <.focus_list>
         <:item>
           <.styled_link href="https://plausible.io/wordpress-analytics-plugin" new_tab={true}>
@@ -161,7 +163,7 @@ defmodule PlausibleWeb.Live.InstallationV2.Instructions do
 
   def npm_instructions(assigns) do
     ~H"""
-    <.title class="mt-4">
+    <.title class="my-4">
       NPM installation
     </.title>
     <.focus_list>

test/plausible_web/live/verification_test.exs

@@ -12,7 +12,7 @@ defmodule PlausibleWeb.Live.VerificationTest do
   @retry_button ~s|a[phx-click="retry"]|
   # @go_to_dashboard_button ~s|a[href$="?skip_to_dashboard=true"]|
   @progress ~s|#verification-ui p#progress|
-  @awaiting ~s|#verification-ui p#awaiting|
+  @awaiting ~s|#verification-ui span#awaiting|
   @heading ~s|#verification-ui h2|
 
   describe "GET /:domain" do