Adding Styles to Injected LiveView Components

August 21, 2024 - 2 mins read

When players move on the hex grid, events are created in the game state’s events log and each player has their own list of the events they can see. I next want to add a UI element to show these events as text in the game view. Before adding the new element, I need to reorganize the existing layout to accommodate this feature.

Styling the LiveView element

One item on my backlog is to fix the height of the game live view page so it doesn’t scroll. When I first created the game UI, the live view element was the only content on the page and I just hard coded it to be the full screen height. I recently added a navbar to the top of the page without adjusting the game view height which caused the full page height to be the screen height plus the navbar height. Now that I’m back to work in the UI space, I’ll finally fix this visual problem.

I’m using Tailwind to style the server-side rendered HTML templates so I apply the necessary class names to the root.html.heex template file used as the default base of all server-side rendered templates. I want the rendered inner content to fill the remaining screen height left after the nav bar which I can achieve with flexbox styling.

<!DOCTYPE html>
<html>
  <!-- header -->

  <body class="flex flex-col h-screen"}>
    <nav class="flex-none">
      <!-- navbar content -->
    </nav>

    <div class="flex-grow">
      <%= @inner_content %>
    </div>
  </body>
</html>

I update the app.html.heex template file used by the game live view to use the full height style for the main content.

<main id="main-content" class="h-full">
  <.flash_group flash={@flash} />

  <%= @inner_content %>
</main>

Unfortunately, the main tag is not filling the full vertical space of its parent div with the flex-grow style. This is because the rendered content of app.html.heex is injected into the DOM with a live view wrapper element which is not being styled. To get the inner live view content to use the full height of the live view’s parent, I update the default style for the live view element in the base web module generated by phoenix.

defmodule MinotaurWeb do
  # …

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MinotaurWeb.Layouts, :app},
        container: {:div, class: "h-full"},
        global_prefixes: ~w(x-)

      unquote(html_helpers())
    end
  end
end

Now everything fits nicely on the page without a scroll bar.