From 91af8a46edc785586ff87ca8bd1d8ff794d2119e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Wed, 21 Apr 2021 17:42:03 +0200
Subject: [PATCH] Make the sidebar floating on small screens
---
lib/livebook_web/live/path_select_component.ex | 4 ++--
lib/livebook_web/live/session_live.ex | 3 ++-
lib/livebook_web/live/session_live/cell_component.ex | 4 ++--
3 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/lib/livebook_web/live/path_select_component.ex b/lib/livebook_web/live/path_select_component.ex
index 2450ade48..fb3e1eb8f 100644
--- a/lib/livebook_web/live/path_select_component.ex
+++ b/lib/livebook_web/live/path_select_component.ex
@@ -67,14 +67,14 @@ defmodule LivebookWeb.PathSelectComponent do
</div>
<div class="flex-grow -m-1 p-1 overflow-y-auto tiny-scrollbar" tabindex="-1">
<%= if highlighting?(@files) do %>
- <div class="grid sm:grid-cols-4 grid-cols-2 gap-2 border-b border-dashed border-grey-200 mb-2 pb-2">
+ <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 border-b border-dashed border-grey-200 mb-2 pb-2">
<%= for file <- @files, file.highlighted != "" do %>
<%= render_file(file, @phx_target) %>
<% end %>
</div>
<% end %>
- <div class="grid sm:grid-cols-3 lg:grid-cols-4 grid-cols-2 gap-2">
+ <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
<%= for file <- @files, file.highlighted == "" do %>
<%= render_file(file, @phx_target) %>
<% end %>
diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex
index dd06f0854..0dfb5a17b 100644
--- a/lib/livebook_web/live/session_live.ex
+++ b/lib/livebook_web/live/session_live.ex
@@ -79,7 +79,8 @@ defmodule LivebookWeb.SessionLive do
<% end %>
</span>
</div>
- <div class="flex flex-col w-1/3 lg:w-1/5 overflow-y-auto bg-gray-50 border-r border-gray-100 px-6 py-10" data-element="sections-panel">
+ <div class="flex flex-col h-full w-full max-w-xs absolute z-30 top-0 left-[64px] shadow-xl md:static md:shadow-none overflow-y-auto bg-gray-50 border-r border-gray-100 px-6 py-10"
+ data-element="sections-panel">
<div class="flex-grow flex flex-col">
<h3 class="font-semibold text-gray-800 text-lg">
Sections
diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex
index 2364984d9..87a164f35 100644
--- a/lib/livebook_web/live/session_live/cell_component.ex
+++ b/lib/livebook_web/live/session_live/cell_component.ex
@@ -17,7 +17,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
def render_cell_content(%{cell_view: %{type: :markdown}} = assigns) do
~L"""
- <div class="flex items-center justify-end">
+ <div class="mb-1 flex items-center justify-end">
<div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
<span class="tooltip top" aria-label="Edit content" data-element="enable-insert-mode-button">
<button class="icon-button">
@@ -74,7 +74,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
def render_cell_content(%{cell_view: %{type: :elixir}} = assigns) do
~L"""
- <div class="mb-1 flex justify-between">
+ <div class="mb-1 flex items-center justify-between">
<div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions" data-primary>
<%= if @cell_view.evaluation_status == :ready do %>
<button class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"