style: Update form layout for channel creation page

src/views/pages/apps-id-channels-create.html

@@ -15,12 +15,12 @@ <h2>Channels / New</h2>
   </div>
 
   <form
-    style="border-style: dashed; border-radius: 5px; padding: 20px; width: fit-content; display: flex; flex-direction: column; gap: 20px;"
+    style="border-style: dashed; border-radius: 5px; padding: 20px; width: 32.5%; display: flex; flex-direction: column; gap: 20px;"
     action="/apps/<%= app.id %>/channels" method="POST">
 
-    <div>
-      <label for="channel_type">Channel Type:</label>
-      <select id="channel_type" name="channel_type" required onchange="showForm()">
+    <div style="display: flex; gap: 5px; align-items: center; justify-content: space-between;">
+      <label for="channel_type" style="flex: 1;">Channel Type:</label>
+      <select id="channel_type" name="channel_type" required onchange="showForm()" style="flex: 2;">
         <option value="">Select a type</option>
         <option value="email">Email</option>
         <option value="discord">Discord</option>
@@ -29,47 +29,49 @@ <h2>Channels / New</h2>
     </div>
 
     <div id="email_form" style="display:none; flex-direction: column; gap: 10px;">
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="email_host">Email Host:</label>
         <input type="text" id="email_host" name="email_host" required>
       </div>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="email_port">Email Port:</label>
         <input type="number" id="email_port" name="email_port" required>
       </div>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="email_alias">Email Alias:</label>
         <input type="email" id="email_alias" name="email_alias" required>
       </div>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="email_auth_email">Auth Email:</label>
         <input type="email" id="email_auth_email" name="email_auth_email" required>
       </div>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="email_auth_pass">Auth Password:</label>
         <input type="password" id="email_auth_pass" name="email_auth_pass" required>
       </div>
     </div>
 
     <div id="discord_form" style="display:none;">
-      <label for="discord_webhook">Webhook URL:</label>
-      <input type="text" id="discord_webhook" name="webhook_url" required>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
+        <label for="discord_webhook">Webhook URL:</label>
+        <input type="text" id="discord_webhook" name="webhook_url" required>
+      </div>
     </div>
 
     <div id="sms_form" style="display:none; flex-direction: column; gap: 10px;">
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="sms_account_sid">Twilio Account SID:</label>
         <input type="text" id="sms_account_sid" name="twilio_account_sid" required>
       </div>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="sms_auth_token">Twilio Auth Token:</label>
         <input type="text" id="sms_auth_token" name="twilio_auth_token" required>
       </div>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="sms_from_phone_number">Twilio From Phone Number:</label>
         <input type="text" id="sms_from_phone_number" name="twilio_from_phone_number" required>
       </div>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 5px;">
         <label for="sms_phone_number">Twilio Phone Number:</label>
         <input type="text" id="sms_phone_number" name="twilio_phone_number" required>
       </div>