visual warning when max_label_length exceeded

assets/css/app.css

@@ -28,3 +28,12 @@
 		-1px 1px 0 white,
 		1px 1px 0 white;
 }
+
+.outline-danger {
+	color: #ff6b6b;
+	text-shadow:
+		-1px -1px 0 #ff6b6b,
+		1px -1px 0 #ff6b6b,
+		-1px 1px 0 #ff6b6b,
+		1px 1px 0 #ff6b6b;
+}

assets/tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
 			colors: {
 				primary: '#6495ED', // cornflowerblue
 				highlight: '#74A0EF',
+				danger: '#FF6B6B',
 				bg: {
 					light: '#D1DFFA',
 					dark: '#1E2D47',

lib/labelmaker_web/controllers/label_controller.ex

@@ -1,5 +1,6 @@
 defmodule LabelmakerWeb.LabelController do
   use LabelmakerWeb, :controller
+  alias LabelmakerWeb.Constants
   alias LabelmakerWeb.Tools
 
   @label_dir Path.join(:code.priv_dir(:labelmaker), "static/labels")
@@ -36,7 +37,7 @@ defmodule LabelmakerWeb.LabelController do
       options.size,
       "-font",
       options.font,
-      "label:#{options.label}",
+      "label:#{String.slice(options.label, 0, Constants.max_label_length())}",
       "-set",
       "comment",
       inspect(Jason.encode!(options)),

lib/labelmaker_web/live/home.ex

@@ -33,18 +33,18 @@ defmodule LabelmakerWeb.Home do
   end
 
   def render(assigns) do
+    label_too_long = String.length(assigns.label) > Constants.max_label_length()
+
     ~H"""
     <div class="max-w-xl mx-auto p-4 space-y-6">
       <h1 class="text-2xl font-bold text-center">Labelmaker</h1>
 
       <div
-        class={[
+        class={
-          "flex justify-center items-center p-4 overflow-hidden whitespace-nowrap bg-gradient-to-r from-black to-white border rounded border-primary",
+          "flex justify-center items-center p-4 overflow-hidden whitespace-nowrap bg-gradient-to-r from-black to-white border rounded transition duration-300 #{if label_too_long, do: "border-danger", else: "border-primary"} #{if label_too_long, do: "outline-danger", else: @outline != "none" && "outline-#{@outline}"}"}
-          @outline != "none" && "outline-#{@outline}"
-        ]}
         style={"height: calc(2rem + #{@preview_height}px); color: #{@color}; font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px;"}
       >
-        <%= if String.length(@label) > Constants.max_label_length() do %>
+        <%= if label_too_long do %>
           {Constants.max_label_error()}
         <% else %>
           <%= for {str, i} <- Enum.with_index(@preview_text) do %>
@@ -63,7 +63,7 @@ defmodule LabelmakerWeb.Home do
             name="label"
             value={@label}
             placeholder="Enter text"
-            class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary dark:placeholder-gray-400/50"
+            class={"mt-1 block w-full rounded border border-gray-300 px-3 py-2 text-fg-light dark:text-fg-dark dark:border-gray-600 focus:ring-primary dark:placeholder-gray-400/50 transition duration-300 #{if label_too_long, do: "bg-danger", else: "bg-secondary-light dark:bg-secondary-dark"}"}
           />
         </div>
 

lib/labelmaker_web/tools.ex

@@ -13,7 +13,7 @@ defmodule LabelmakerWeb.Tools do
       |> Enum.map(fn
         {:label, label} ->
           if String.length(label) > Constants.max_label_length(),
-            do: {:label, String.slice(label, 0, Constants.max_label_length())},
+            do: {:label, String.slice(label, 0, Constants.max_label_length() + 1)},
             else: {:label, label}
 
         {:preview_height, _} ->