From e0c0828444cb786b564c16590460361ab8ccc53f Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Mon, 31 Jan 2022 22:40:07 -0500
Subject: [PATCH] make topbar slightly more responsive

---
 lib/cannery_web/component/topbar.ex              | 9 +++++----
 lib/cannery_web/templates/layout/topbar.html.eex | 6 +++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/lib/cannery_web/component/topbar.ex b/lib/cannery_web/component/topbar.ex
index 9581514..eb8a4ad 100644
--- a/lib/cannery_web/component/topbar.ex
+++ b/lib/cannery_web/component/topbar.ex
@@ -13,7 +13,7 @@ defmodule CanneryWeb.Component.Topbar do
       %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns)
 
     ~H"""
-    <header class="mb-8 px-8 py-4 w-full bg-primary-400">
+    <header class="mb-8 px-8 py-4 w-full bg-primary-400 overflow-x-hidden">
       <nav role="navigation">
         <div class="flex flex-row justify-between items-center space-x-4">
           <div class="flex flex-row justify-start items-center space-x-2">
@@ -27,8 +27,9 @@ defmodule CanneryWeb.Component.Topbar do
               <%= @title_content %>
             <% end %>
           </div>
-          <ul class="flex flex-row flex-wrap justify-center items-center
-            space-x-4 text-lg text-white">
+
+          <ul class="flex flex-col sm:flex-row flex-wrap justify-center items-center
+            space-x-4 text-lg text-white text-ellipsis">
             <%= if @current_user do %>
               <li>
                 <%= link("Tags",
@@ -64,7 +65,7 @@ defmodule CanneryWeb.Component.Topbar do
               <% end %>
               <li>
                 <%= link(@current_user.email,
-                  class: "hover:underline",
+                  class: "hover:underline truncate",
                   to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit)
                 ) %>
               </li>
diff --git a/lib/cannery_web/templates/layout/topbar.html.eex b/lib/cannery_web/templates/layout/topbar.html.eex
index 6012f0a..33fd1d5 100644
--- a/lib/cannery_web/templates/layout/topbar.html.eex
+++ b/lib/cannery_web/templates/layout/topbar.html.eex
@@ -1,11 +1,11 @@
 <nav role="navigation">
-  <div class="flex flex-row justify-between items-center space-x-4">
+  <div class="flex flex-row justify-between items-center space-x-4 overflow-x-hidden">
     <%= link to: Routes.live_path(CanneryWeb.Endpoint, HomeLive) do %>
       <h1 class="leading-5 text-xl text-white hover:underline">Cannery</h1>
     <% end %>
 
-    <ul class="flex flex-row flex-wrap justify-center items-center
-      space-x-4 text-lg text-white">
+    <ul class="flex flex-col sm:flex-row flex-wrap justify-center items-center
+      space-x-4 text-lg text-white text-ellipsis">
       <%# user settings %>
       <%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
         <li>