From 36ced79515e43970f9db088b84b58c75089868b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Valim?= <jose.valim@dashbit.co>
Date: Tue, 11 Oct 2022 19:06:18 +0200
Subject: [PATCH] Tiny adjustments to style and responsiveness based on
 feedback

---
 lib/livebook_web/live/home_live.ex                     |  4 ++--
 .../live/home_live/session_list_component.ex           |  4 ++--
 lib/livebook_web/live/hub/edit_live.ex                 |  2 +-
 lib/livebook_web/live/hub/new_live.ex                  |  4 ++--
 lib/livebook_web/live/layout_helpers.ex                | 10 +++++-----
 lib/livebook_web/live/learn_live.ex                    | 10 +++++-----
 lib/livebook_web/live/settings_live.ex                 |  8 ++++----
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/lib/livebook_web/live/home_live.ex b/lib/livebook_web/live/home_live.ex
index e2e9ecbc5..58c40dfcc 100644
--- a/lib/livebook_web/live/home_live.ex
+++ b/lib/livebook_web/live/home_live.ex
@@ -50,10 +50,10 @@ defmodule LivebookWeb.HomeLive do
       </:topbar_action>
       <.update_notification version={@new_version} instructions_url={@update_instructions_url} />
       <.memory_notification memory={@memory} app_service_url={@app_service_url} />
-      <div class="p-4 sm:px-8 md:px-16 sm:py-6 max-w-screen-lg mx-auto space-y-4">
+      <div class="p-4 md:px-12 md:py-6 max-w-screen-lg mx-auto space-y-4">
         <div class="flex flex-row space-y-0 items-center pb-4 justify-between">
           <PageHelpers.title text="Home" />
-          <div class="hidden sm:flex space-x-2" role="navigation" aria-label="new notebook">
+          <div class="hidden md:flex space-x-2" role="navigation" aria-label="new notebook">
             <%= live_patch("Import",
               to: Routes.home_path(@socket, :import, "url"),
               class: "button-base button-outlined-gray whitespace-nowrap"
diff --git a/lib/livebook_web/live/home_live/session_list_component.ex b/lib/livebook_web/live/home_live/session_list_component.ex
index 7444c5f33..14e7d6c82 100644
--- a/lib/livebook_web/live/home_live/session_list_component.ex
+++ b/lib/livebook_web/live/home_live/session_list_component.ex
@@ -222,7 +222,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
     assigns = assign(assigns, free: free, used: used, total: total, percentage: percentage)
 
     ~H"""
-    <div class="pr-4" role="group" aria-label="memory information">
+    <div class="pr-1 lg:pr-4" role="group" aria-label="memory information">
       <span class="tooltip top" data-tooltip={"#{format_bytes(@free)} available"}>
         <svg viewbox="-10 5 50 25" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
           <circle
@@ -243,7 +243,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
             fill="none"
           />
         </svg>
-        <div class="hidden md:flex">
+        <div class="hidden sm:flex md:hidden lg:flex">
           <span class="px-2 py-1 text-sm text-gray-500 font-medium">
             <%= format_bytes(@used) %> / <%= format_bytes(@total) %>
             <span class="sr-only"><%= @percentage %> percent used</span>
diff --git a/lib/livebook_web/live/hub/edit_live.ex b/lib/livebook_web/live/hub/edit_live.ex
index 4613662d0..0ad4d2585 100644
--- a/lib/livebook_web/live/hub/edit_live.ex
+++ b/lib/livebook_web/live/hub/edit_live.ex
@@ -36,7 +36,7 @@ defmodule LivebookWeb.Hub.EditLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-8">
+      <div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-8">
         <div>
           <PageHelpers.title text="Edit Hub" socket={@socket} />
         </div>
diff --git a/lib/livebook_web/live/hub/new_live.ex b/lib/livebook_web/live/hub/new_live.ex
index b80635b7f..329801b21 100644
--- a/lib/livebook_web/live/hub/new_live.ex
+++ b/lib/livebook_web/live/hub/new_live.ex
@@ -23,7 +23,7 @@ defmodule LivebookWeb.Hub.NewLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-8">
+      <div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-8">
         <div>
           <PageHelpers.title text="Add Hub" socket={@socket} />
           <p class="mt-4 text-gray-700">
@@ -36,7 +36,7 @@ defmodule LivebookWeb.Hub.NewLive do
             1. Select your Hub service
           </h2>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <.card_item id="fly" selected={@selected_type} title="Fly">
               <:logo>
                 <%= Phoenix.HTML.raw(File.read!("static/images/fly.svg")) %>
diff --git a/lib/livebook_web/live/layout_helpers.ex b/lib/livebook_web/live/layout_helpers.ex
index 946434c86..c72e5faac 100644
--- a/lib/livebook_web/live/layout_helpers.ex
+++ b/lib/livebook_web/live/layout_helpers.ex
@@ -15,7 +15,7 @@ defmodule LivebookWeb.LayoutHelpers do
 
     ~H"""
     <div class="flex grow h-full">
-      <div class="absolute sm:static h-full z-[600]">
+      <div class="absolute md:static h-full z-[600]">
         <.live_region role="alert" />
         <.sidebar
           socket={@socket}
@@ -25,8 +25,8 @@ defmodule LivebookWeb.LayoutHelpers do
         />
       </div>
       <div class="grow overflow-y-auto">
-        <div class="sm:hidden sticky flex items-center justify-between h-14 px-4 top-0 left-0 z-[500] bg-white border-b border-gray-200">
-          <div class="text-2xl text-gray-400 hover:text-gray-600 focus:text-gray-600">
+        <div class="md:hidden sticky flex items-center justify-between h-14 px-4 top-0 left-0 z-[500] bg-white border-b border-gray-200">
+          <div class="pt-1 text-xl text-gray-400 hover:text-gray-600 focus:text-gray-600">
             <button
               data-el-toggle-sidebar
               aria-label="show sidebar"
@@ -61,12 +61,12 @@ defmodule LivebookWeb.LayoutHelpers do
   defp sidebar(assigns) do
     ~H"""
     <nav
-      class="hidden sm:flex w-[18rem] h-full py-2 sm:py-5 bg-gray-900"
+      class="hidden md:flex w-[16rem] h-full py-2 md:py-5 bg-gray-900"
       aria-label="sidebar"
       data-el-sidebar
     >
       <button
-        class="hidden text-2xl text-gray-300 hover:text-white focus:text-white absolute top-3 right-3"
+        class="hidden text-xl text-gray-300 hover:text-white focus:text-white absolute top-4 right-3"
         aria-label="hide sidebar"
         data-el-toggle-sidebar
         phx-click={
diff --git a/lib/livebook_web/live/learn_live.ex b/lib/livebook_web/live/learn_live.ex
index d35cd8bca..870b25fc5 100644
--- a/lib/livebook_web/live/learn_live.ex
+++ b/lib/livebook_web/live/learn_live.ex
@@ -29,7 +29,7 @@ defmodule LivebookWeb.LearnLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-lg mx-auto space-y-4">
+      <div class="p-4 md:px-12 md:py-7 max-w-screen-lg mx-auto space-y-4">
         <div>
           <PageHelpers.title text="Learn" />
           <p class="mt-4 mb-8 text-gray-700">
@@ -57,7 +57,7 @@ defmodule LivebookWeb.LearnLive do
             </div>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
           <% # Note: it's fine to use stateless components in this comprehension,
           # because @notebook_infos never change %>
           <%= for info <- @notebook_infos do %>
@@ -92,7 +92,7 @@ defmodule LivebookWeb.LearnLive do
       <div class="mt-4">
         <ul>
           <%= for {notebook_info, number} <- Enum.with_index(@group_info.notebook_infos, 1) do %>
-            <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center sm:space-x-5 border-b border-gray-200 last:border-b-0">
+            <li class="py-4 flex flex-row items-center space-x-5 border-b border-gray-200 last:border-b-0">
               <div class="text-lg text-gray-400 font-semibold">
                 <%= number |> Integer.to_string() |> String.pad_leading(2, "0") %>
               </div>
@@ -100,8 +100,8 @@ defmodule LivebookWeb.LearnLive do
                 <%= notebook_info.title %>
               </div>
               <%= live_redirect to: Routes.learn_path(@socket, :notebook, notebook_info.slug),
-                    class: "button-base button-outlined-gray mt-3 sm:mt-0" do %>
-                <.remix_icon icon="play-circle-line" class="align-middle mr-1" /> Open notebook
+                    class: "button-base button-outlined-gray" do %>
+                <.remix_icon icon="play-circle-line" class="align-middle mr-1" /> Open
               <% end %>
             </li>
           <% end %>
diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex
index b25edd195..5e31e14b9 100644
--- a/lib/livebook_web/live/settings_live.ex
+++ b/lib/livebook_web/live/settings_live.ex
@@ -34,7 +34,7 @@ defmodule LivebookWeb.SettingsLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div id="settings-page" class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-16">
+      <div id="settings-page" class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-16">
         <!-- System settings section -->
         <div class="flex flex-col space-y-10">
           <div>
@@ -50,8 +50,8 @@ defmodule LivebookWeb.SettingsLive do
             <h2 class="text-xl text-gray-800 font-medium">
               About
             </h2>
-            <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">
+            <div class="flex flex-col sm:flex-row gap-4 sm:gap-12 items-center justify-center sm:justify-between border border-gray-200 rounded-lg p-4">
+              <div class="flex justify-center sm: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 %>
@@ -120,7 +120,7 @@ defmodule LivebookWeb.SettingsLive do
           </div>
           <!-- Environment variables configuration -->
           <div class="flex flex-col space-y-4">
-            <h2 class="text-xl text-gray-800 font-semibold pb-2 border-b border-gray-200">
+            <h2 class="text-xl text-gray-800 font-medium pb-2 border-b border-gray-200">
               Environment variables
             </h2>
             <p class="mt-4 text-gray-700">