indicate which sizing mode is in play

lib/labelmaker_web/live/home.html.heex

@@ -107,7 +107,7 @@
         </select>
       </div>
 
-      <div>
+      <div class={if(@sizing == "wxh", do: "opacity-50", else: "")}>
         <label for="size" class="block text-sm font-medium">Size</label>
         <select
           id="size"
@@ -120,7 +120,7 @@
         </select>
       </div>
 
-      <div>
+      <div class={if(@sizing == "font", do: "opacity-50", else: "")}>
         <label for="width" class="block text-sm font-medium">Width</label>
         <input
           type="number"
@@ -131,11 +131,15 @@
           step={1}
           value={if @width != 0, do: @width}
           placeholder="Image width"
-          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"
+          class={[
+            "mt-1 block w-full rounded border border-gray-300 px-3 py-2",
+            "bg-secondary-light text-fg-light focus:ring-primary",
+            "dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600"
+          ]}
         />
       </div>
 
-      <div>
+      <div class={if(@sizing == "font", do: "opacity-50", else: "")}>
         <label for="height" class="block text-sm font-medium">Height</label>
         <input
           type="number"
@@ -155,6 +159,7 @@
       options={Constants.permitted_alignments()}
       selected={@align}
       event_name="update_alignment"
+      class={if(@sizing == "font", do: "opacity-50", else: "")}
     />
   </form>