fix(ux): Adjust table column widths and overflow badges by truncating them (#5258)

Fixes #5230 Fixes #5244 Fixes #5233 Fixes #5245 Fixes #5247 Fixes #5237 Fixes #5235 Fixes #5252 Updates the sidebar to collapse at the `xl` breakpoint, allowing to stay closed for more screen realestate on smaller screens. <img width="879" alt="Screenshot 2024-06-05 at 1 06 49 PM" src="https://github.com/firezone/firezone/assets/167144/ff864e57-ba6b-42ee-bdf5-f6b046e46717"> --------- Signed-off-by: Jamil <jamilbk@users.noreply.github.com>
2026-01-27 10:18:54 +00:00 · 2024-06-05 16:19:33 -07:00
parent 492d5c976e
commit 402be27802
22 changed files with 114 additions and 114 deletions
--- a/elixir/apps/web/lib/web/components/core_components.ex
+++ b/elixir/apps/web/lib/web/components/core_components.ex
@@ -834,13 +834,13 @@ defmodule Web.CoreComponents do

  def identity_identifier(assigns) do
    ~H"""
-    <span class="flex inline-flex" data-identity-id={@identity.id}>
+    <span class="flex items-center" data-identity-id={@identity.id}>
      <.link
        navigate={
          Web.Settings.IdentityProviders.Components.view_provider(@account, @identity.provider)
        }
        data-provider-id={@identity.provider.id}
-        title={@identity.provider.adapter}
+        title={get_identity_email(@identity)}
        class={~w[
          text-xs
          rounded-l
@@ -854,23 +854,16 @@ defmodule Web.CoreComponents do
        <.provider_icon adapter={@identity.provider.adapter} class="h-3.5 w-3.5" />
      </.link>
      <span class={~w[
-        flex items-center
        text-xs
+        min-w-0
        rounded-r
        mr-2 py-0.5 pl-1.5 pr-2.5
        text-neutral-900
        bg-neutral-100
      ]}>
-        <%= get_identity_email(@identity) %>
-      </span>
-      <span :if={not is_nil(@identity.deleted_at)} class="text-sm">
-        (deleted)
-      </span>
-      <span :if={not is_nil(@identity.provider.disabled_at)} class="text-sm">
-        (provider disabled)
-      </span>
-      <span :if={not is_nil(@identity.provider.deleted_at)} class="text-sm">
-        (provider deleted)
+        <span class="block truncate" title={get_identity_email(@identity)}>
+          <%= get_identity_email(@identity) %>
+        </span>
      </span>
    </span>
    """
@@ -893,33 +886,31 @@ defmodule Web.CoreComponents do

  def group(assigns) do
    ~H"""
-    <span class="flex inline-flex" data-group-id={@group.id}>
+    <span class="flex items-center" data-group-id={@group.id}>
      <.link
        :if={Actors.group_synced?(@group)}
        navigate={Web.Settings.IdentityProviders.Components.view_provider(@account, @group.provider)}
        data-provider-id={@group.provider_id}
        title={@group.provider.adapter}
        class={~w[
-          text-xs
          rounded-l
          py-0.5 px-1.5
          text-neutral-900
          bg-neutral-50
          border-neutral-100
          border
-          whitespace-nowrap
        ]}
      >
        <.provider_icon adapter={@group.provider.adapter} class="h-3.5 w-3.5" />
      </.link>
-      <.link navigate={~p"/#{@account}/groups/#{@group}"} class={~w[
-          flex items-center
+      <.link title={@group.name} navigate={~p"/#{@account}/groups/#{@group}"} class={~w[
          text-xs
+          truncate
+          min-w-0
          #{if(Actors.group_synced?(@group), do: "rounded-r pl-1.5 pr-2.5", else: "rounded px-1.5")}
          py-0.5
          text-neutral-800
          bg-neutral-100
-          whitespace-nowrap
        ]}>
        <%= @group.name %>
      </.link>
--- a/elixir/apps/web/lib/web/components/layouts/app.html.heex
+++ b/elixir/apps/web/lib/web/components/layouts/app.html.heex
@@ -85,14 +85,14 @@
      <a
        target="_blank"
        href="https://www.firezone.dev/kb?utm_source=product"
-        class="text-neutral-700 hover:text-neutral-900 md:hidden"
+        class="text-neutral-700 hover:text-neutral-900 lg:hidden"
      >
        Docs
      </a>
      <a
        target="_blank"
        href="https://firezone.statuspage.io"
-        class="text-neutral-700 hover:text-neutral-900 md:hidden"
+        class="text-neutral-700 hover:text-neutral-900 lg:hidden"
      >
        Status
      </a>
@@ -100,7 +100,7 @@
  </:bottom>
 </.sidebar>

-<main class="md:ml-64 h-auto pt-14">
+<main class="lg:ml-64 h-auto pt-14">
  <.flash :if={@account.warning} kind={:warning}>
    <%= @account.warning %>.
    <span :if={Domain.Billing.account_provisioned?(@account)}>
--- a/elixir/apps/web/lib/web/components/navigation_components.ex
+++ b/elixir/apps/web/lib/web/components/navigation_components.ex
@@ -15,7 +15,7 @@ defmodule Web.NavigationComponents do
            data-drawer-toggle="drawer-navigation"
            aria-controls="drawer-navigation"
            class={[
-              "p-2 mr-2 text-neutral-600 rounded cursor-pointer md:hidden",
+              "p-2 mr-2 text-neutral-600 rounded cursor-pointer lg:hidden",
              "hover:text-neutral-900 hover:bg-neutral-100"
            ]}
          >
@@ -33,14 +33,14 @@ defmodule Web.NavigationComponents do
          <a
            target="_blank"
            href="https://www.firezone.dev/kb?utm_source=product"
-            class="mr-6 mt-1 text-neutral-700 hover:text-neutral-900 md:ml-2 hidden md:block"
+            class="mr-6 mt-1 text-neutral-700 hover:text-neutral-900 lg:ml-2 hidden lg:block"
          >
            Docs
          </a>
          <a
            target="_blank"
            href="https://firezone.statuspage.io"
-            class="mr-6 mt-1 text-neutral-700 hover:text-neutral-900 md:ml-2 hidden md:block"
+            class="mr-6 mt-1 text-neutral-700 hover:text-neutral-900 lg:ml-2 hidden lg:block"
          >
            Status
          </a>
@@ -108,7 +108,7 @@ defmodule Web.NavigationComponents do
        pt-14 pb-8
        transition-transform -translate-x-full
        bg-white border-r border-neutral-200
-        md:translate-x-0
+        lg:translate-x-0
      ]} aria-label="Sidenav" id="drawer-navigation">
      <div class="overflow-y-auto py-1 px-1 h-full bg-white">
        <ul>
--- a/elixir/apps/web/lib/web/live/actors/groups.ex
+++ b/elixir/apps/web/lib/web/live/actors/groups.ex
@@ -79,7 +79,7 @@ defmodule Web.Actors.EditGroups do
            ordered_by={@order_by_table_id["groups"]}
            metadata={@groups_metadata}
          >
-            <:col :let={group} label="GROUP">
+            <:col :let={group} label="group">
              <.icon
                :if={removed?(group, @removed)}
                name="hero-minus"
--- a/elixir/apps/web/lib/web/live/actors/index.ex
+++ b/elixir/apps/web/lib/web/live/actors/index.ex
@@ -68,7 +68,9 @@ defmodule Web.Actors.Index do
          metadata={@actors_metadata}
        >
          <:col :let={actor} field={{:actors, :name}} label="name">
-            <.actor_name_and_role account={@account} actor={actor} />
+            <span class="block truncate" title={actor.name}>
+              <.actor_name_and_role account={@account} actor={actor} />
+            </span>
          </:col>

          <:col :let={actor} label="identifiers">
@@ -81,7 +83,7 @@ defmodule Web.Actors.Index do
            </div>
          </:col>

-          <:col :let={actor} label="groups">
+          <:col :let={actor} label="groups" class="w-4/12">
            <.peek peek={@actor_groups[actor.id]}>
              <:empty>
                None
--- a/elixir/apps/web/lib/web/live/actors/show.ex
+++ b/elixir/apps/web/lib/web/live/actors/show.ex
@@ -224,24 +224,27 @@ defmodule Web.Actors.Show do
          ordered_by={@order_by_table_id["identities"]}
          metadata={@identities_metadata}
        >
-          <:col :let={identity} label="IDENTITY">
+          <:col :let={identity} label="identity">
            <.identity_identifier account={@account} identity={identity} />
          </:col>
-          <:col :let={identity} label="CREATED">
+          <:col :let={identity} label="created">
            <.created_by account={@account} schema={identity} />
          </:col>
-          <:col :let={identity} label="LAST SIGNED IN">
+          <:col :let={identity} label="last signed in">
            <.relative_datetime datetime={identity.last_seen_at} />
          </:col>
          <:action :let={identity}>
            <.button
              :if={identity_has_email?(identity)}
              size="xs"
+              title="Send Welcome Email"
              icon="hero-envelope"
              phx-click="send_welcome_email"
              phx-value-id={identity.id}
            >
-              Send Welcome Email
+              <span class="hidden md:block truncate">
+                Send Welcome Email
+              </span>&nbsp;
            </.button>
          </:action>
          <:action :let={identity}>
@@ -318,19 +321,19 @@ defmodule Web.Actors.Show do
          ordered_by={@order_by_table_id["tokens"]}
          metadata={@tokens_metadata}
        >
-          <:col :let={token} label="TYPE" class="w-1/12">
+          <:col :let={token} label="type" class="w-1/12">
            <%= token.type %>
          </:col>
-          <:col :let={token} :if={@actor.type != :service_account} label="IDENTITY" class="w-2/12">
+          <:col :let={token} :if={@actor.type != :service_account} label="identity" class="w-3/12">
            <.identity_identifier account={@account} identity={token.identity} />
          </:col>
-          <:col :let={token} :if={@actor.type == :service_account} label="NAME" class="w-2/12">
+          <:col :let={token} :if={@actor.type == :service_account} label="name" class="w-2/12">
            <%= token.name %>
          </:col>
-          <:col :let={token} label="CREATED">
+          <:col :let={token} label="created">
            <.created_by account={@account} schema={token} />
          </:col>
-          <:col :let={token} label="LAST USED" class="w-3/12">
+          <:col :let={token} label="last used">
            <p>
              <.relative_datetime datetime={token.last_seen_at} />
            </p>
@@ -338,10 +341,10 @@ defmodule Web.Actors.Show do
              <code class="text-xs"><.last_seen schema={token} /></code>
            </p>
          </:col>
-          <:col :let={token} label="EXPIRES">
+          <:col :let={token} label="expires">
            <.relative_datetime datetime={token.expires_at} />
          </:col>
-          <:col :let={token} label="CLIENT">
+          <:col :let={token} label="client">
            <.intersperse_blocks :if={token.type == :client}>
              <:separator>,&nbsp;</:separator>

@@ -385,12 +388,12 @@ defmodule Web.Actors.Show do
          ordered_by={@order_by_table_id["clients"]}
          metadata={@clients_metadata}
        >
-          <:col :let={client} label="NAME">
+          <:col :let={client} label="name">
            <.link navigate={~p"/#{@account}/clients/#{client.id}"} class={[link_style()]}>
              <%= client.name %>
            </.link>
          </:col>
-          <:col :let={client} label="STATUS">
+          <:col :let={client} label="status">
            <.connection_status schema={client} />
          </:col>
          <:empty>
@@ -415,32 +418,32 @@ defmodule Web.Actors.Show do
          ordered_by={@order_by_table_id["flows"]}
          metadata={@flows_metadata}
        >
-          <:col :let={flow} label="AUTHORIZED">
+          <:col :let={flow} label="authorized" class="xl:w-1/12">
            <.relative_datetime datetime={flow.inserted_at} />
          </:col>
-          <:col :let={flow} label="EXPIRES">
+          <:col :let={flow} label="expires" class="xl:w-1/12">
            <.relative_datetime datetime={flow.expires_at} />
          </:col>
-          <:col :let={flow} label="POLICY">
+          <:col :let={flow} label="policy" class="w-3/12">
            <.link navigate={~p"/#{@account}/policies/#{flow.policy_id}"} class={[link_style()]}>
              <Web.Policies.Components.policy_name policy={flow.policy} />
            </.link>
          </:col>
-          <:col :let={flow} label="CLIENT" class="w-3/12">
+          <:col :let={flow} label="client">
            <.link navigate={~p"/#{@account}/clients/#{flow.client_id}"} class={link_style()}>
              <%= flow.client.name %>
            </.link>
            <br />
            <code class="text-xs"><%= flow.client_remote_ip %></code>
          </:col>
-          <:col :let={flow} label="GATEWAY" class="w-3/12">
+          <:col :let={flow} label="gateway">
            <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={[link_style()]}>
              <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
            </.link>
            <br />
            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
          </:col>
-          <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
+          <:col :let={flow} :if={@flow_activities_enabled?} label="activity" class="w-1/12">
            <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={[link_style()]}>
              Show
            </.link>
@@ -471,7 +474,7 @@ defmodule Web.Actors.Show do
          ordered_by={@order_by_table_id["groups"]}
          metadata={@groups_metadata}
        >
-          <:col :let={group} label="NAME">
+          <:col :let={group} label="name">
            <.link navigate={~p"/#{@account}/groups/#{group.id}"} class={[link_style()]}>
              <%= group.name %>
            </.link>
--- a/elixir/apps/web/lib/web/live/clients/index.ex
+++ b/elixir/apps/web/lib/web/live/clients/index.ex
@@ -61,17 +61,17 @@ defmodule Web.Clients.Index do
          ordered_by={@order_by_table_id["clients"]}
          metadata={@clients_metadata}
        >
-          <:col :let={client} field={{:clients, :name}} label="NAME">
+          <:col :let={client} field={{:clients, :name}} label="name">
            <.link navigate={~p"/#{@account}/clients/#{client.id}"} class={[link_style()]}>
              <%= client.name %>
            </.link>
          </:col>
-          <:col :let={client} label="USER">
+          <:col :let={client} label="user">
            <.link navigate={~p"/#{@account}/actors/#{client.actor.id}"} class={[link_style()]}>
              <%= client.actor.name %>
            </.link>
          </:col>
-          <:col :let={client} label="STATUS">
+          <:col :let={client} label="status">
            <.connection_status schema={client} />
          </:col>
          <:empty>
--- a/elixir/apps/web/lib/web/live/clients/show.ex
+++ b/elixir/apps/web/lib/web/live/clients/show.ex
@@ -170,28 +170,28 @@ defmodule Web.Clients.Show do
          ordered_by={@order_by_table_id["flows"]}
          metadata={@flows_metadata}
        >
-          <:col :let={flow} label="AUTHORIZED">
+          <:col :let={flow} label="authorized">
            <.relative_datetime datetime={flow.inserted_at} />
          </:col>
-          <:col :let={flow} label="EXPIRES">
+          <:col :let={flow} label="expires">
            <.relative_datetime datetime={flow.expires_at} />
          </:col>
-          <:col :let={flow} label="REMOTE IP" class="w-3/12">
+          <:col :let={flow} label="remote ip" class="w-3/12">
            <%= flow.client_remote_ip %>
          </:col>
-          <:col :let={flow} label="POLICY">
+          <:col :let={flow} label="policy">
            <.link navigate={~p"/#{@account}/policies/#{flow.policy_id}"} class={[link_style()]}>
              <.policy_name policy={flow.policy} />
            </.link>
          </:col>
-          <:col :let={flow} label="GATEWAY" class="w-3/12">
+          <:col :let={flow} label="gateway" class="w-3/12">
            <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={[link_style()]}>
              <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
            </.link>
            <br />
            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
          </:col>
-          <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
+          <:col :let={flow} :if={@flow_activities_enabled?} label="activity">
            <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={[link_style()]}>
              Show
            </.link>
--- a/elixir/apps/web/lib/web/live/flows/show.ex
+++ b/elixir/apps/web/lib/web/live/flows/show.ex
@@ -155,22 +155,22 @@ defmodule Web.Flows.Show do
          ordered_by={@order_by_table_id["activities"]}
          metadata={@activities_metadata}
        >
-          <:col :let={activity} label="STARTED AT">
+          <:col :let={activity} label="started at">
            <.relative_datetime datetime={activity.window_started_at} />
          </:col>
-          <:col :let={activity} label="ENDED AT">
+          <:col :let={activity} label="ended at">
            <.relative_datetime datetime={activity.window_ended_at} />
          </:col>
-          <:col :let={activity} label="DESTINATION">
+          <:col :let={activity} label="destination">
            <%= activity.destination %>
          </:col>
-          <:col :let={activity} label="CONNECTIVITY TYPE">
+          <:col :let={activity} label="connectivity type">
            <%= activity.connectivity_type %>
          </:col>
-          <:col :let={activity} label="RX">
+          <:col :let={activity} label="rx">
            <%= Sizeable.filesize(activity.rx_bytes) %>
          </:col>
-          <:col :let={activity} label="TX">
+          <:col :let={activity} label="tx">
            <%= Sizeable.filesize(activity.tx_bytes) %>
          </:col>
          <:empty>
--- a/elixir/apps/web/lib/web/live/groups/edit_actors.ex
+++ b/elixir/apps/web/lib/web/live/groups/edit_actors.ex
@@ -82,7 +82,7 @@ defmodule Web.Groups.EditActors do
            ordered_by={@order_by_table_id["actors"]}
            metadata={@actors_metadata}
          >
-            <:col :let={actor} label="ACTOR">
+            <:col :let={actor} label="actor">
              <.icon
                :if={removed?(actor, @removed)}
                name="hero-minus"
@@ -106,7 +106,7 @@ defmodule Web.Groups.EditActors do
                }
              />
            </:col>
-            <:col :let={actor} label="IDENTITIES">
+            <:col :let={actor} label="identities">
              <span class="flex flex-wrap gap-y-2">
                <.identity_identifier
                  :for={identity <- actor.identities}
--- a/elixir/apps/web/lib/web/live/groups/index.ex
+++ b/elixir/apps/web/lib/web/live/groups/index.ex
@@ -66,7 +66,7 @@ defmodule Web.Groups.Index do
          ordered_by={@order_by_table_id["groups"]}
          metadata={@groups_metadata}
        >
-          <:col :let={group} field={{:groups, :name}} label="NAME" class="w-2/4">
+          <:col :let={group} field={{:groups, :name}} label="name" class="w-2/4">
            <.link navigate={~p"/#{@account}/groups/#{group.id}"} class={[link_style()]}>
              <%= group.name %>
            </.link>
@@ -75,7 +75,7 @@ defmodule Web.Groups.Index do
              (deleted)
            </span>
          </:col>
-          <:col :let={group} label="ACTORS">
+          <:col :let={group} label="actors">
            <.peek peek={Map.fetch!(@group_actors, group.id)}>
              <:empty>
                None
--- a/elixir/apps/web/lib/web/live/groups/show.ex
+++ b/elixir/apps/web/lib/web/live/groups/show.ex
@@ -150,11 +150,11 @@ defmodule Web.Groups.Show do
          ordered_by={@order_by_table_id["actors"]}
          metadata={@actors_metadata}
        >
-          <:col :let={actor} label="ACTOR">
+          <:col :let={actor} label="actor">
            <.actor_name_and_role account={@account} actor={actor} />
          </:col>
-          <:col :let={actor} label="IDENTITIES">
-            <span class="flex items-center">
+          <:col :let={actor} label="identities">
+            <span class="flex flex-wrap gap-y-2">
              <.identity_identifier
                :for={identity <- actor.identities}
                account={@account}
@@ -200,17 +200,17 @@ defmodule Web.Groups.Show do
          ordered_by={@order_by_table_id["policies"]}
          metadata={@policies_metadata}
        >
-          <:col :let={policy} label="ID">
+          <:col :let={policy} label="id">
            <.link class={link_style()} navigate={~p"/#{@account}/policies/#{policy}"}>
              <%= policy.id %>
            </.link>
          </:col>
-          <:col :let={policy} label="RESOURCE">
+          <:col :let={policy} label="resource">
            <.link class={link_style()} navigate={~p"/#{@account}/resources/#{policy.resource_id}"}>
              <%= policy.resource.name %>
            </.link>
          </:col>
-          <:col :let={policy} label="STATUS">
+          <:col :let={policy} label="status">
            <%= if is_nil(policy.deleted_at) do %>
              <%= if is_nil(policy.disabled_at) do %>
                Active
--- a/elixir/apps/web/lib/web/live/policies/index.ex
+++ b/elixir/apps/web/lib/web/live/policies/index.ex
@@ -64,22 +64,24 @@ defmodule Web.Policies.Index do
          ordered_by={@order_by_table_id["policies"]}
          metadata={@policies_metadata}
        >
-          <:col :let={policy} label="ID">
+          <:col :let={policy} label="id" class="w-3/12">
            <.link class={link_style()} navigate={~p"/#{@account}/policies/#{policy}"}>
-              <%= policy.id %>
+              <span class="block truncate">
+                <%= policy.id %>
+              </span>
            </.link>
          </:col>
-          <:col :let={policy} label="GROUP">
+          <:col :let={policy} label="group" class="w-3/12">
            <span class="flex items-center">
              <.group account={@account} group={policy.actor_group} />
            </span>
          </:col>
-          <:col :let={policy} label="RESOURCE">
+          <:col :let={policy} label="resource" class="w-2/12">
            <.link class={link_style()} navigate={~p"/#{@account}/resources/#{policy.resource_id}"}>
              <%= policy.resource.name %>
            </.link>
          </:col>
-          <:col :let={policy} label="STATUS">
+          <:col :let={policy} label="status">
            <%= if is_nil(policy.deleted_at) do %>
              <%= if is_nil(policy.disabled_at) do %>
                Active
--- a/elixir/apps/web/lib/web/live/policies/show.ex
+++ b/elixir/apps/web/lib/web/live/policies/show.ex
@@ -63,7 +63,7 @@ defmodule Web.Policies.Show do

    <.section>
      <:title>
-        Policy: <code><%= @policy.id %></code>
+        <.policy_name policy={@policy} />
        <span :if={not is_nil(@policy.disabled_at)} class="text-primary-600">(disabled)</span>
        <span :if={not is_nil(@policy.deleted_at)} class="text-red-600">(deleted)</span>
      </:title>
@@ -169,13 +169,13 @@ defmodule Web.Policies.Show do
          ordered_by={@order_by_table_id["flows"]}
          metadata={@flows_metadata}
        >
-          <:col :let={flow} label="AUTHORIZED">
+          <:col :let={flow} label="authorized">
            <.relative_datetime datetime={flow.inserted_at} />
          </:col>
-          <:col :let={flow} label="EXPIRES">
+          <:col :let={flow} label="expires">
            <.relative_datetime datetime={flow.expires_at} />
          </:col>
-          <:col :let={flow} label="CLIENT, ACTOR" class="w-3/12">
+          <:col :let={flow} label="client, actor" class="w-3/12">
            <.link navigate={~p"/#{@account}/clients/#{flow.client_id}"} class={link_style()}>
              <%= flow.client.name %>
            </.link>
@@ -185,14 +185,14 @@ defmodule Web.Policies.Show do
            </.link>
            <%= flow.client_remote_ip %>
          </:col>
-          <:col :let={flow} label="GATEWAY" class="w-3/12">
+          <:col :let={flow} label="gateway" class="w-3/12">
            <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={link_style()}>
              <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
            </.link>
            <br />
            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
          </:col>
-          <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
+          <:col :let={flow} :if={@flow_activities_enabled?} label="activity">
            <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={link_style()}>
              Show
            </.link>
--- a/elixir/apps/web/lib/web/live/relay_groups/index.ex
+++ b/elixir/apps/web/lib/web/live/relay_groups/index.ex
@@ -74,7 +74,7 @@ defmodule Web.RelayGroups.Index do
              </span>
            </:group>

-            <:col :let={relay} label="INSTANCE">
+            <:col :let={relay} label="instance">
              <.link
                :if={relay.account_id}
                navigate={~p"/#{@account}/relays/#{relay.id}"}
@@ -100,11 +100,11 @@ defmodule Web.RelayGroups.Index do
              </div>
            </:col>

-            <:col :let={relay} label="TYPE">
+            <:col :let={relay} label="type">
              <%= if relay.account_id, do: "self-hosted", else: "firezone-owned" %>
            </:col>

-            <:col :let={relay} label="STATUS">
+            <:col :let={relay} label="status">
              <.connection_status schema={relay} />
            </:col>
            <:empty>
--- a/elixir/apps/web/lib/web/live/relay_groups/show.ex
+++ b/elixir/apps/web/lib/web/live/relay_groups/show.ex
@@ -117,7 +117,7 @@ defmodule Web.RelayGroups.Show do
            ordered_by={@order_by_table_id["relays"]}
            metadata={@relays_metadata}
          >
-            <:col :let={relay} label="INSTANCE">
+            <:col :let={relay} label="instance">
              <.link navigate={~p"/#{@account}/relays/#{relay.id}"} class={[link_style()]}>
                <code :if={relay.name} class="block text-xs">
                  <%= relay.name %>
@@ -130,7 +130,7 @@ defmodule Web.RelayGroups.Show do
                </code>
              </.link>
            </:col>
-            <:col :let={relay} label="STATUS">
+            <:col :let={relay} label="status">
              <.connection_status schema={relay} />
            </:col>
            <:empty>
--- a/elixir/apps/web/lib/web/live/resources/index.ex
+++ b/elixir/apps/web/lib/web/live/resources/index.ex
@@ -73,12 +73,12 @@ defmodule Web.Resources.Index do
          ordered_by={@order_by_table_id["resources"]}
          metadata={@resources_metadata}
        >
-          <:col :let={resource} field={{:resources, :name}} label="NAME">
+          <:col :let={resource} field={{:resources, :name}} label="Name">
            <.link navigate={~p"/#{@account}/resources/#{resource.id}"} class={link_style()}>
              <%= resource.name %>
            </.link>
          </:col>
-          <:col :let={resource} field={{:resources, :address}} label="ADDRESS">
+          <:col :let={resource} field={{:resources, :address}} label="Address">
            <code class="block text-xs">
              <%= resource.address %>
            </code>
@@ -94,7 +94,7 @@ defmodule Web.Resources.Index do
              </.badge>
            </.link>
          </:col>
-          <:col :let={resource} label="Authorized groups">
+          <:col :let={resource} label="Authorized groups" class="w-4/12">
            <.peek peek={Map.fetch!(@resource_actor_groups_peek, resource.id)}>
              <:empty>
                None -
--- a/elixir/apps/web/lib/web/live/resources/show.ex
+++ b/elixir/apps/web/lib/web/live/resources/show.ex
@@ -207,15 +207,15 @@ defmodule Web.Resources.Show do
          ordered_by={@order_by_table_id["policies"]}
          metadata={@policies_metadata}
        >
-          <:col :let={policy} label="ID">
+          <:col :let={policy} label="id">
            <.link class={link_style()} navigate={~p"/#{@account}/policies/#{policy}"}>
              <%= policy.id %>
            </.link>
          </:col>
-          <:col :let={policy} label="GROUP">
+          <:col :let={policy} label="group">
            <.group account={@account} group={policy.actor_group} />
          </:col>
-          <:col :let={policy} label="STATUS">
+          <:col :let={policy} label="status">
            <%= if is_nil(policy.deleted_at) do %>
              <%= if is_nil(policy.disabled_at) do %>
                Active
@@ -267,18 +267,18 @@ defmodule Web.Resources.Show do
          ordered_by={@order_by_table_id["flows"]}
          metadata={@flows_metadata}
        >
-          <:col :let={flow} label="AUTHORIZED">
+          <:col :let={flow} label="authorized">
            <.relative_datetime datetime={flow.inserted_at} />
          </:col>
-          <:col :let={flow} label="EXPIRES">
+          <:col :let={flow} label="expires">
            <.relative_datetime datetime={flow.expires_at} />
          </:col>
-          <:col :let={flow} label="POLICY">
+          <:col :let={flow} label="policy">
            <.link navigate={~p"/#{@account}/policies/#{flow.policy_id}"} class={[link_style()]}>
              <.policy_name policy={flow.policy} />
            </.link>
          </:col>
-          <:col :let={flow} label="CLIENT, ACTOR" class="w-3/12">
+          <:col :let={flow} label="client, actor" class="w-3/12">
            <.link navigate={~p"/#{@account}/clients/#{flow.client_id}"} class={[link_style()]}>
              <%= flow.client.name %>
            </.link>
@@ -288,14 +288,14 @@ defmodule Web.Resources.Show do
            </.link>
            <%= flow.client_remote_ip %>
          </:col>
-          <:col :let={flow} label="GATEWAY" class="w-3/12">
+          <:col :let={flow} label="gateway" class="w-3/12">
            <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={[link_style()]}>
              <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
            </.link>
            <br />
            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
          </:col>
-          <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
+          <:col :let={flow} :if={@flow_activities_enabled?} label="activity">
            <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={[link_style()]}>
              Show
            </.link>
--- a/elixir/apps/web/lib/web/live/settings/identity_providers/index.ex
+++ b/elixir/apps/web/lib/web/live/settings/identity_providers/index.ex
@@ -78,13 +78,15 @@ defmodule Web.Settings.IdentityProviders.Index do
          ordered_by={@order_by_table_id["providers"]}
          metadata={@providers_metadata}
        >
-          <:col :let={provider} field={{:providers, :name}} label="Name">
+          <:col :let={provider} field={{:providers, :name}} label="Name" class="w-2/12">
            <.link navigate={view_provider(@account, provider)} class={[link_style()]}>
              <%= provider.name %>
            </.link>
          </:col>
-          <:col :let={provider} label="Type"><%= adapter_name(provider.adapter) %></:col>
-          <:col :let={provider} label="Status">
+          <:col :let={provider} label="Type" class="w-2/12">
+            <%= adapter_name(provider.adapter) %>
+          </:col>
+          <:col :let={provider} label="Status" class="w-2/12">
            <.status provider={provider} />
          </:col>
          <:col :let={provider} label="Sync Status">
--- a/elixir/apps/web/lib/web/live/sites/gateways/index.ex
+++ b/elixir/apps/web/lib/web/live/sites/gateways/index.ex
@@ -79,17 +79,17 @@ defmodule Web.Sites.Gateways.Index do
          ordered_by={@order_by_table_id["gateways"]}
          metadata={@gateways_metadata}
        >
-          <:col :let={gateway} field={{:gateways, :name}} label="INSTANCE">
+          <:col :let={gateway} field={{:gateways, :name}} label="instance">
            <.link navigate={~p"/#{@account}/gateways/#{gateway.id}"} class={[link_style()]}>
              <%= gateway.name %>
            </.link>
          </:col>
-          <:col :let={gateway} label="REMOTE IP">
+          <:col :let={gateway} label="remote iP">
            <code>
              <%= gateway.last_seen_remote_ip %>
            </code>
          </:col>
-          <:col :let={gateway} label="STATUS">
+          <:col :let={gateway} label="status">
            <.connection_status schema={gateway} />
          </:col>
          <:empty>
--- a/elixir/apps/web/lib/web/live/sites/index.ex
+++ b/elixir/apps/web/lib/web/live/sites/index.ex
@@ -112,7 +112,7 @@ defmodule Web.Sites.Index do
            </.peek>
          </:col>

-          <:col :let={group} label="online gateways">
+          <:col :let={group} label="online gateways" class="w-1/6">
            <% gateways = Enum.filter(group.gateways, & &1.online?)
            peek = %{count: length(gateways), items: Enum.take(gateways, 5)} %>
            <.peek peek={peek}>
--- a/elixir/apps/web/lib/web/live/sites/show.ex
+++ b/elixir/apps/web/lib/web/live/sites/show.ex
@@ -154,17 +154,17 @@ defmodule Web.Sites.Show do
            ordered_by={@order_by_table_id["gateways"]}
            metadata={@gateways_metadata}
          >
-            <:col :let={gateway} label="INSTANCE">
+            <:col :let={gateway} label="instance">
              <.link navigate={~p"/#{@account}/gateways/#{gateway.id}"} class={[link_style()]}>
                <%= gateway.name %>
              </.link>
            </:col>
-            <:col :let={gateway} label="REMOTE IP">
+            <:col :let={gateway} label="remote ip">
              <code>
                <%= gateway.last_seen_remote_ip %>
              </code>
            </:col>
-            <:col :let={gateway} label="STATUS">
+            <:col :let={gateway} label="status">
              <.connection_status schema={gateway} />
            </:col>
            <:empty>
@@ -209,7 +209,7 @@ defmodule Web.Sites.Show do
            ordered_by={@order_by_table_id["resources"]}
            metadata={@resources_metadata}
          >
-            <:col :let={resource} label="NAME" field={{:resources, :name}}>
+            <:col :let={resource} label="name" field={{:resources, :name}}>
              <.link
                navigate={~p"/#{@account}/resources/#{resource}?site_id=#{@group}"}
                class={[link_style()]}
@@ -217,7 +217,7 @@ defmodule Web.Sites.Show do
                <%= resource.name %>
              </.link>
            </:col>
-            <:col :let={resource} label="ADDRESS" field={{:resources, :address}}>
+            <:col :let={resource} label="address" field={{:resources, :address}}>
              <code class="block text-xs">
                <%= resource.address %>
              </code>