From 81cd85ef05d24266b2eebfaf65ee942094523d5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Wed, 19 Jul 2023 12:14:24 +0200
Subject: [PATCH] Fix app menu overflowing on mobile (#2092)

---
 .../components/core_components.ex             | 21 +++++++++++++++++++
 lib/livebook_web/live/app_session_live.ex     |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/lib/livebook_web/components/core_components.ex b/lib/livebook_web/components/core_components.ex
index 2204e3050..ec2e442e2 100644
--- a/lib/livebook_web/components/core_components.ex
+++ b/lib/livebook_web/components/core_components.ex
@@ -254,6 +254,10 @@ defmodule LivebookWeb.CoreComponents do
     default: :bottom_right,
     values: [:top_left, :top_right, :bottom_left, :bottom_right]
 
+  attr :md_position, :atom,
+    default: nil,
+    values: [nil, :top_left, :top_right, :bottom_left, :bottom_right]
+
   attr :distant, :boolean,
     default: false,
     doc: "whether the menu should be further from the anchor element"
@@ -284,6 +288,7 @@ defmodule LivebookWeb.CoreComponents do
         class={[
           "absolute z-[100] rounded-lg bg-white flex flex-col py-2 shadow-[0_15px_99px_-0px_rgba(12,24,41,0.15)] hidden",
           menu_position_class(@position),
+          @md_position && menu_md_position_class(@md_position),
           @distant && menu_distant_class(@position)
         ]}
         role="menu"
@@ -310,6 +315,22 @@ defmodule LivebookWeb.CoreComponents do
   defp menu_position_class(:bottom_left), do: "bottom-0 left-0 transform translate-y-full -mb-1"
   defp menu_position_class(:bottom_right), do: "bottom-0 right-0 transform translate-y-full -mb-1"
 
+  defp menu_md_position_class(:top_left) do
+    "md:top-0 md:left-0 md:bottom-auto md:right-auto md:transform md:-translate-y-full md:-mt-1 md:mb-0"
+  end
+
+  defp menu_md_position_class(:top_right) do
+    "md:top-0 md:right-0 md:bottom-auto md:left-auto md:transform md:-translate-y-full md:-mt-1 md:mb-0"
+  end
+
+  defp menu_md_position_class(:bottom_left) do
+    "md:bottom-0 md:left-0 md:top-auto md:right-auto md:transform md:translate-y-full md:-mb-1 md:mt-0"
+  end
+
+  defp menu_md_position_class(:bottom_right) do
+    "md:bottom-0 md:right-0 md:top-auto md:left-auto md:transform md:translate-y-full md:-mb-1 md:mt-0"
+  end
+
   defp menu_distant_class(position) when position in [:top_left, :top_right], do: "-mt-2"
   defp menu_distant_class(position) when position in [:bottom_left, :bottom_right], do: "-mb-2"
 
diff --git a/lib/livebook_web/live/app_session_live.ex b/lib/livebook_web/live/app_session_live.ex
index a67733a8f..4c21c4e63 100644
--- a/lib/livebook_web/live/app_session_live.ex
+++ b/lib/livebook_web/live/app_session_live.ex
@@ -98,8 +98,8 @@ defmodule LivebookWeb.AppSessionLive do
     ~H"""
     <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}>
+        <div class="absolute md:fixed right-4 md:left-4 md:right-auto top-3">
+          <.menu id="app-menu" position={:bottom_right} md_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" />