From a2c58f8d8ea9db763506d3eb3c8708c4238557fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Valim?= <jose.valim@dashbit.co>
Date: Fri, 24 Mar 2023 15:22:50 +0100
Subject: [PATCH] Improve apps on mobile (#1821)

---
 lib/livebook_web/live/app_live.ex | 135 ++++++++++++++----------------
 1 file changed, 65 insertions(+), 70 deletions(-)

diff --git a/lib/livebook_web/live/app_live.ex b/lib/livebook_web/live/app_live.ex
index 2c286e769..ecd409a45 100644
--- a/lib/livebook_web/live/app_live.ex
+++ b/lib/livebook_web/live/app_live.ex
@@ -55,77 +55,72 @@ defmodule LivebookWeb.AppLive do
   @impl true
   def render(assigns) when assigns.app_authenticated? do
     ~H"""
-    <div class="flex grow h-full">
-      <div class="px-3 py-5">
-        <.menu id="app-menu" position={:bottom_left}>
-          <:toggle>
-            <button class="flex items-center text-gray-900">
-              <img src={~p"/images/logo.png"} height="40" width="40" alt="logo livebook" />
-              <.remix_icon icon="arrow-down-s-line" />
-            </button>
-          </:toggle>
-          <.menu_item>
-            <.link navigate={~p"/"} role="menuitem">
-              <.remix_icon icon="home-6-line" />
-              <span>Home</span>
-            </.link>
-          </.menu_item>
-          <.menu_item :if={@data_view.show_source}>
-            <.link patch={~p"/apps/#{@data_view.slug}/source"} role="menuitem">
-              <.remix_icon icon="code-line" />
-              <span>View source</span>
-            </.link>
-          </.menu_item>
-        </.menu>
-      </div>
-      <div class="grow overflow-y-auto relative" data-el-notebook>
-        <div
-          class="w-full max-w-screen-lg px-4 sm:pl-8 sm:pr-16 md:pl-16 pt-4 sm:py-5 mx-auto"
-          data-el-notebook-content
-        >
-          <div data-el-js-view-iframes phx-update="ignore" id="js-view-iframes"></div>
-          <div class="flex items-center pb-4 mb-2 space-x-4 border-b border-gray-200">
-            <h1 class="text-3xl font-semibold text-gray-800">
-              <%= @data_view.notebook_name %>
-            </h1>
-          </div>
-          <div :if={@data_view.app_status == :booting} class="flex items-center space-x-2">
-            <span class="relative flex h-3 w-3">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75">
-              </span>
-              <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
-            </span>
-            <div class="text-gray-700 font-medium">
-              Booting
-            </div>
-          </div>
-          <div :if={@data_view.app_status == :error} class="flex items-center space-x-2">
-            <span class="relative flex h-3 w-3">
-              <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
-            </span>
-            <div class="text-gray-700 font-medium">
-              Error
-            </div>
-          </div>
-          <div
-            :if={@data_view.app_status in [:running, :shutting_down]}
-            class="pt-4 flex flex-col space-y-6"
-            data-el-outputs-container
-            id="outputs"
-          >
-            <div :for={output_view <- Enum.reverse(@data_view.output_views)}>
-              <LivebookWeb.Output.outputs
-                outputs={[output_view.output]}
-                dom_id_map={%{}}
-                session_id={@session.id}
-                session_pid={@session.pid}
-                client_id={@client_id}
-                input_values={output_view.input_values}
-              />
-            </div>
-          </div>
-          <div style="height: 80vh"></div>
+    <div class="h-full relative overflow-y-auto px-4 md:px-20" data-el-notebook>
+      <div class="w-full max-w-screen-lg py-4 mx-auto" data-el-notebook-content>
+        <div class="absolute md:fixed right-8 md:left-4 top-3 w-10 h-10">
+          <.menu id="app-menu" position={:bottom_left}>
+            <:toggle>
+              <button class="flex items-center text-gray-900">
+                <img src={~p"/images/logo.png"} height="40" width="40" alt="logo livebook" />
+                <.remix_icon icon="arrow-down-s-line" />
+              </button>
+            </:toggle>
+            <.menu_item>
+              <.link navigate={~p"/"} role="menuitem">
+                <.remix_icon icon="home-6-line" />
+                <span>Home</span>
+              </.link>
+            </.menu_item>
+            <.menu_item :if={@data_view.show_source}>
+              <.link patch={~p"/apps/#{@data_view.slug}/source"} role="menuitem">
+                <.remix_icon icon="code-line" />
+                <span>View source</span>
+              </.link>
+            </.menu_item>
+          </.menu>
         </div>
+        <div data-el-js-view-iframes phx-update="ignore" id="js-view-iframes"></div>
+        <div class="flex items-center pb-4 mb-2 space-x-4 border-b border-gray-200 pr-20 md:pr-0">
+          <h1 class="text-3xl font-semibold text-gray-800">
+            <%= @data_view.notebook_name %>
+          </h1>
+        </div>
+        <div :if={@data_view.app_status == :booting} class="flex items-center space-x-2">
+          <span class="relative flex h-3 w-3">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75">
+            </span>
+            <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
+          </span>
+          <div class="text-gray-700 font-medium">
+            Booting
+          </div>
+        </div>
+        <div :if={@data_view.app_status == :error} class="flex items-center space-x-2">
+          <span class="relative flex h-3 w-3">
+            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+          </span>
+          <div class="text-gray-700 font-medium">
+            Error
+          </div>
+        </div>
+        <div
+          :if={@data_view.app_status in [:running, :shutting_down]}
+          class="pt-4 flex flex-col space-y-6"
+          data-el-outputs-container
+          id="outputs"
+        >
+          <div :for={output_view <- Enum.reverse(@data_view.output_views)}>
+            <LivebookWeb.Output.outputs
+              outputs={[output_view.output]}
+              dom_id_map={%{}}
+              session_id={@session.id}
+              session_pid={@session.pid}
+              client_id={@client_id}
+              input_values={output_view.input_values}
+            />
+          </div>
+        </div>
+        <div style="height: 80vh"></div>
       </div>
     </div>