From 854fc203e0b972cdf2a09d53a058c6a5132bc553 Mon Sep 17 00:00:00 2001
From: Paulo Valim <plvalim@gmail.com>
Date: Mon, 19 Sep 2022 20:24:05 +0200
Subject: [PATCH] Adjust mobile layout on the settings page (#1421)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: José Valim <jose.valim@gmail.com>
Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
---
 lib/livebook_web/live/live_helpers.ex  | 28 ++++++++++++++------------
 lib/livebook_web/live/settings_live.ex | 16 ++++++++-------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/lib/livebook_web/live/live_helpers.ex b/lib/livebook_web/live/live_helpers.ex
index f6ba0288f..08c8f74b3 100644
--- a/lib/livebook_web/live/live_helpers.ex
+++ b/lib/livebook_web/live/live_helpers.ex
@@ -291,22 +291,24 @@ defmodule LivebookWeb.LiveHelpers do
       )
 
     ~H"""
-    <div class="flex space-x-3 items-center justify-between">
+    <div class="flex items-center gap-1 justify-between">
       <%= if @label do %>
         <span class="text-gray-700"><%= @label %></span>
       <% end %>
-      <label class={"switch-button #{if(@disabled, do: "switch-button--disabled")}"}>
-        <input type="hidden" value="false" name={@name} />
-        <input
-          type="checkbox"
-          value="true"
-          class={"switch-button__checkbox #{@class}"}
-          name={@name}
-          checked={@checked}
-          {@attrs}
-        />
-        <div class="switch-button__bg"></div>
-      </label>
+      <div>
+        <label class={"switch-button #{if(@disabled, do: "switch-button--disabled")}"}>
+          <input type="hidden" value="false" name={@name} />
+          <input
+            type="checkbox"
+            value="true"
+            class={"switch-button__checkbox #{@class}"}
+            name={@name}
+            checked={@checked}
+            {@attrs}
+          />
+          <div class="switch-button__bg"></div>
+        </label>
+      </div>
     </div>
     """
   end
diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex
index 3e6b0d8c7..962b17503 100644
--- a/lib/livebook_web/live/settings_live.ex
+++ b/lib/livebook_web/live/settings_live.ex
@@ -50,8 +50,8 @@ defmodule LivebookWeb.SettingsLive do
             <h2 class="text-xl text-gray-800 font-medium">
               About
             </h2>
-            <div class="flex items-center justify-between border border-gray-200 rounded-lg p-4">
-              <div class="flex items-center space-x-12">
+            <div class="flex flex-col md:flex-row gap-4 md:gap-12 items-center justify-center md:justify-between border border-gray-200 rounded-lg p-4">
+              <div class="flex justify-center md:items-center space-x-12">
                 <%= if app_name = Livebook.Config.app_service_name() do %>
                   <.labeled_text label="Application">
                     <%= if app_url = Livebook.Config.app_service_url() do %>
@@ -71,11 +71,13 @@ defmodule LivebookWeb.SettingsLive do
                 </.labeled_text>
               </div>
 
-              <%= live_redirect to: Routes.live_dashboard_path(@socket, :home),
-                                  class: "button-base button-outlined-gray" do %>
-                <.remix_icon icon="dashboard-2-line" class="align-middle mr-1" />
-                <span>Open dashboard</span>
-              <% end %>
+              <div class="self-center">
+                <%= live_redirect to: Routes.live_dashboard_path(@socket, :home),
+                                    class: "button-base button-outlined-gray" do %>
+                  <.remix_icon icon="dashboard-2-line" class="align-middle mr-1" />
+                  <span>Open dashboard</span>
+                <% end %>
+              </div>
             </div>
           </div>
           <!-- Updates -->