Improve responsive features

assets/package-lock.json

@@ -1515,6 +1515,7 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
+        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -3369,6 +3370,7 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -4828,7 +4830,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -7390,6 +7393,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -9237,6 +9241,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
+        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -14986,8 +14991,10 @@
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dev": true,
       "dependencies": {
+        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",

lib/livebook_web/live/home_live.ex

@@ -20,7 +20,7 @@ defmodule LivebookWeb.HomeLive do
     <div class="flex flex-grow h-full">
       <div class="flex-grow px-6 py-8 overflow-y-auto">
         <div class="max-w-screen-lg w-full mx-auto p-4 pt-0 pb-8 flex flex-col items-center space-y-4">
-          <div class="w-full flex flex-col space-y-2 items-center sm:flex-row sm:space-y-0 sm:justify-between pb-4 border-b border-gray-200">
+          <div class="w-full flex flex-col space-y-2 items-center sm:flex-row sm:space-y-0 sm:justify-between sm:pb-4 pb-8 border-b border-gray-200">
             <div class="text-2xl text-gray-800 font-semibold">
               <img src="/logo-with-text.png" class="h-[50px]" alt="Livebook" />
             </div>

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 grid-cols-4 gap-2 border-b border-dashed border-grey-200 mb-2 pb-2">
+          <div class="grid sm:grid-cols-4 grid-cols-2 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 grid-cols-4 gap-2">
+        <div class="grid sm:grid-cols-3 lg:grid-cols-4 grid-cols-2 gap-2">
           <%= for file <- @files, file.highlighted == "" do %>
             <%= render_file(file, @phx_target) %>
           <% end %>

lib/livebook_web/live/session_live/shortcuts_component.ex

@@ -65,11 +65,11 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
     <h3 class="text-lg font-medium text-gray-900 pt-4">
       <%= @title %>
     </h3>
-    <div class="mt-2 flex">
+    <div class="mt-2 flex sm:flex-row flex-col">
-      <div class="w-1/2">
+      <div class="flex-grow">
         <%= render_shortcuts_section_table(@left, @platform) %>
       </div>
-      <div class="w-1/2">
+      <div class="flex-grow">
         <%= render_shortcuts_section_table(@right, @platform) %>
       </div>
     </div>