properly generate link

lib/labelmaker_web/live/home.html.heex

@@ -107,7 +107,11 @@
         </select>
       </div>
 
-      <div class={if(@sizing == "wxh", do: "opacity-50", else: "")}>
+      <div
+        phx-click="update_sizing"
+        phx-value-sizing="font"
+        class={if(@sizing == "wxh", do: "opacity-50", else: "")}
+      >
         <label for="size" class="block text-sm font-medium">Size</label>
         <select
           id="size"
@@ -120,7 +124,11 @@
         </select>
       </div>
 
-      <div class={if(@sizing == "font", do: "opacity-50", else: "")}>
+      <div
+        phx-click="update_sizing"
+        phx-value-sizing="wxh"
+        class={if(@sizing == "font", do: "opacity-50", else: "")}
+      >
         <label for="width" class="block text-sm font-medium">Width</label>
         <input
           type="number"
@@ -139,7 +147,11 @@
         />
       </div>
 
-      <div class={if(@sizing == "font", do: "opacity-50", else: "")}>
+      <div
+        phx-click="update_sizing"
+        phx-value-sizing="wxh"
+        class={if(@sizing == "font", do: "opacity-50", else: "")}
+      >
         <label for="height" class="block text-sm font-medium">Height</label>
         <input
           type="number"
@@ -155,17 +167,29 @@
       </div>
     </div>
 
-    <.radio_component
-      options={Constants.permitted_alignments()}
-      selected={@align}
-      event_name="update_alignment"
+    <div
+      phx-click="update_sizing"
+      phx-value-sizing="wxh"
       class={if(@sizing == "font", do: "opacity-50", else: "")}
-    />
+    >
+      <.radio_component
+        options={Constants.permitted_alignments()}
+        selected={@align}
+        event_name="update_alignment"
+      />
+    </div>
   </form>
 
   <div class="text-center">
     <a href={@link}>
-      <button class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
+      <button
+        disabled={
+          if(@sizing == "wxh" && (@height == "" || @height == 0 || @width == "" || @width == 0),
+            do: true
+          )
+        }
+        class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark"
+      >
         Create
       </button>
     </a>