Squeeze tooltip in the sections panel (#536)

lib/livebook/utils.ex

@@ -196,4 +196,45 @@ defmodule Livebook.Utils do
     end)
     |> URI.to_string()
   end
+
+  @doc ~S"""
+  Wraps the given line into lines that fit in `width` characters.
+
+  Words longer than `width` are not broken apart.
+
+  ## Examples
+
+      iex> Livebook.Utils.wrap_line("cat on the roof", 7)
+      "cat on\nthe\nroof"
+
+      iex> Livebook.Utils.wrap_line("cat in the cup", 7)
+      "cat in\nthe cup"
+
+      iex> Livebook.Utils.wrap_line("cat in the cup", 2)
+      "cat\nin\nthe\ncup"
+  """
+  @spec wrap_line(String.t(), pos_integer()) :: String.t()
+  def wrap_line(line, width) do
+    line
+    |> String.split()
+    |> Enum.reduce({[[]], 0}, fn part, {[group | groups], group_size} ->
+      size = String.length(part)
+
+      cond do
+        group == [] ->
+          {[[part] | groups], size}
+
+        group_size + 1 + size <= width ->
+          {[[part, " " | group] | groups], group_size + 1 + size}
+
+        true ->
+          {[[part], group | groups], size}
+      end
+    end)
+    |> elem(0)
+    |> Enum.map(&Enum.reverse/1)
+    |> Enum.reverse()
+    |> Enum.intersperse("\n")
+    |> IO.iodata_to_binary()
+  end
 end

lib/livebook_web/live/session_live.ex

@@ -121,7 +121,9 @@ defmodule LivebookWeb.SessionLive do
                   data-section-id={section_item.id}>
                   <span><%= section_item.name %></span>
                   <%= if section_item.parent do %>
-                    <span class="tooltip right" aria-label={"Branches from\n”#{section_item.parent.name}”"}>
+                    <%# Note: the container has overflow-y auto, so we cannot set overflow-x visible,
+                        consequently we show the tooltip at the bottom wrapped to a fixed number of characters %>
+                    <span class="tooltip bottom" aria-label={parent_branch_tooltip(section_item.parent.name)}>
                       <.remix_icon icon="git-branch-line" class="text-lg font-normal flip-horizontally leading-none" />
                     </span>
                   <% end %>
@@ -341,6 +343,11 @@ defmodule LivebookWeb.SessionLive do
   defp settings_component_for(%Cell.Input{}),
     do: LivebookWeb.SessionLive.InputCellSettingsComponent
 
+  defp parent_branch_tooltip(parent_name) do
+    wrapped_name = Livebook.Utils.wrap_line("”" <> parent_name <> "”", 16)
+    "Branches from\n#{wrapped_name}"
+  end
+
   @impl true
   def handle_params(%{"cell_id" => cell_id}, _url, socket) do
     {:ok, cell, _} = Notebook.fetch_cell_and_section(socket.private.data.notebook, cell_id)