From e0ddefe1d7c474370a0a81771c7a75b86a2a3fb8 Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Mon, 28 Mar 2022 23:56:45 -0400
Subject: [PATCH] fix tag and container overflow

---
 lib/cannery_web/components/container_card.ex        | 4 ++--
 lib/cannery_web/components/tag_card.ex              | 2 +-
 lib/cannery_web/live/container_live/index.html.heex | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/cannery_web/components/container_card.ex b/lib/cannery_web/components/container_card.ex
index ba6cec2c..fc298e91 100644
--- a/lib/cannery_web/components/container_card.ex
+++ b/lib/cannery_web/components/container_card.ex
@@ -14,11 +14,11 @@ defmodule CanneryWeb.Components.ContainerCard do
     ~H"""
     <div
       id={"container-#{@container.id}"}
-      class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
+      class="overflow-hidden max-w-full mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
         border border-gray-400 rounded-lg shadow-lg hover:shadow-md
         transition-all duration-300 ease-in-out"
     >
-      <div class="mb-4 flex flex-col justify-center items-center space-y-2">
+      <div class="max-w-full mb-4 flex flex-col justify-center items-center space-y-2">
         <%= live_redirect to: Routes.container_show_path(Endpoint, :show, @container),
                       class: "link" do %>
           <h1 class="px-4 py-2 rounded-lg title text-xl">
diff --git a/lib/cannery_web/components/tag_card.ex b/lib/cannery_web/components/tag_card.ex
index e5a18a3e..3cfd38da 100644
--- a/lib/cannery_web/components/tag_card.ex
+++ b/lib/cannery_web/components/tag_card.ex
@@ -22,7 +22,7 @@ defmodule CanneryWeb.Components.TagCard do
   def simple_tag_card(assigns) do
     ~H"""
     <h1
-      class="mx-2 my-1 px-4 py-2 rounded-lg title text-xl"
+      class="inline-block break-all mx-2 my-1 px-4 py-2 rounded-lg title text-xl"
       style={"color: #{@tag.text_color}; background-color: #{@tag.bg_color}"}
     >
       <%= @tag.name %>
diff --git a/lib/cannery_web/live/container_live/index.html.heex b/lib/cannery_web/live/container_live/index.html.heex
index 6cfe1f64..fafaee85 100644
--- a/lib/cannery_web/live/container_live/index.html.heex
+++ b/lib/cannery_web/live/container_live/index.html.heex
@@ -20,7 +20,7 @@
     ) %>
   <% end %>
 
-  <div class="flex flex-row flex-wrap justify-center items-center">
+  <div class="max-w-full flex flex-row flex-wrap justify-center items-center">
     <%= for container <- @containers do %>
       <.container_card container={container}>
         <:tag_actions>