Add support for boxed grid (#1375)

assets/css/js_interop.css

@@ -157,12 +157,8 @@ solely client-side operations.
   @apply absolute bottom-2 right-2;
 }
 
-[data-el-output]:not([data-wrapper]) {
-  @apply py-4;
-}
-
 [data-el-output][data-border] {
-  @apply px-4 border border-t-0 border-gray-200 divide-y divide-gray-200;
+  @apply p-4 border border-t-0 border-gray-200 divide-y divide-gray-200;
 }
 
 [data-el-output][data-border]:first-child {

lib/livebook/notebook.ex

@@ -765,14 +765,24 @@ defmodule Livebook.Notebook do
   end
 
   # Keep layout output and its relevant contents
-  defp do_prune_outputs([{idx, {type, tabs_outputs, _info}} | outputs], acc)
-       when type in [:tabs, :grid] do
+  defp do_prune_outputs([{idx, {:tabs, tabs_outputs, info}} | outputs], acc) do
     case prune_outputs(tabs_outputs) do
       [] ->
         do_prune_outputs(outputs, acc)
 
       pruned_tabs_outputs ->
-        do_prune_outputs(outputs, [{idx, {type, pruned_tabs_outputs, :__pruned__}} | acc])
+        info = Map.replace(info, :labels, :__pruned__)
+        do_prune_outputs(outputs, [{idx, {:tabs, pruned_tabs_outputs, info}} | acc])
+    end
+  end
+
+  defp do_prune_outputs([{idx, {:grid, grid_outputs, info}} | outputs], acc) do
+    case prune_outputs(grid_outputs) do
+      [] ->
+        do_prune_outputs(outputs, acc)
+
+      pruned_grid_outputs ->
+        do_prune_outputs(outputs, [{idx, {:grid, pruned_grid_outputs, info}} | acc])
     end
   end
 

lib/livebook_web/live/output.ex

@@ -17,7 +17,6 @@ defmodule LivebookWeb.Output do
         id={"output-wrapper-#{@dom_id_map[idx] || idx}"}
         data-el-output
         data-border={border?(output)}
-        data-wrapper={wrapper?(output)}
       >
         <%= render_output(output, %{
           id: "output-#{idx}",
@@ -34,15 +33,9 @@ defmodule LivebookWeb.Output do
   defp border?({:stdout, _text}), do: true
   defp border?({:text, _text}), do: true
   defp border?({:error, _message}), do: true
-  # TODO fix spacing and make it an option
-  defp border?({:grid, _, _}), do: true
+  defp border?({:grid, _, info}), do: Map.get(info, :boxed, false)
   defp border?(_output), do: false
 
-  defp wrapper?({:frame, _outputs, _info}), do: true
-  defp wrapper?({:tabs, _tabs, _info}), do: true
-  defp wrapper?({:grid, _tabs, _info}), do: true
-  defp wrapper?(_output), do: false
-
   defp render_output({:stdout, text}, %{id: id}) do
     text = if(text == :__pruned__, do: nil, else: text)
     live_component(Output.StdoutComponent, id: id, text: text)
@@ -105,7 +98,7 @@ defmodule LivebookWeb.Output do
          client_id: client_id
        }) do
     {labels, active_idx} =
-      if info == :__pruned__ do
+      if info.labels == :__pruned__ do
         {[], nil}
       else
         labels =
@@ -179,17 +172,13 @@ defmodule LivebookWeb.Output do
          input_values: input_values,
          client_id: client_id
        }) do
-    style =
-      if info == :__pruned__ do
-        nil
-      else
-        columns = info[:columns] || 1
-        "grid-template-columns: repeat(#{columns}, minmax(0, 1fr));"
-      end
+    columns = info[:columns] || 1
+    gap = info[:gap] || 8
 
     assigns = %{
       id: id,
-      style: style,
+      columns: columns,
+      gap: gap,
       outputs: outputs,
       socket: socket,
       session_id: session_id,
@@ -201,9 +190,8 @@ defmodule LivebookWeb.Output do
     <div id={@id} class="overflow-auto tiny-scrollbar">
       <div
         id={"#{@id}-grid"}
-        class="grid grid-cols-2 gap-x-4 w-full"
-        style={@style}
-        data-keep-attribute="style"
+        class="grid grid-cols-2 w-full"
+        style={"grid-template-columns: repeat(#{@columns}, minmax(0, 1fr)); gap: #{@gap}px"}
         phx-update="append"
       >
         <%= for {output_idx, output} <- @outputs do %>