Adds inputmode attributes to workflow config fields (#755)

- Now the appropriate virtual keyboards are shown! :)
- Also adjusts type weight for workflow config headers to match mockups

frontend/src/pages/org/workflow-editor.ts

@@ -534,7 +534,7 @@ export class CrawlConfigEditor extends LiteElement {
           progressPanel="newJobConfig-${this.progressState.activeTab}"
         >
           <header slot="header" class="flex justify-between items-baseline">
-            <h3>${tabLabels[this.progressState.activeTab]}</h3>
+            <h3 class="font-semibold">${tabLabels[this.progressState.activeTab]}</h3>
             <p class="text-xs text-neutral-500 font-normal">
               ${msg(
                 html`Fields marked with
@@ -788,6 +788,7 @@ export class CrawlConfigEditor extends LiteElement {
           label=${msg("List of URLs")}
           rows="10"
           autocomplete="off"
+          inputmode="url"
           value=${this.formState.urlList}
           placeholder=${`https://example.com
 https://example.com/path`}
@@ -984,6 +985,7 @@ https://example.com/path`}
           name="primarySeedUrl"
           label=${msg("Crawl Start URL")}
           autocomplete="off"
+          inputmode="url"
           placeholder=${urlPlaceholder}
           value=${this.formState.primarySeedUrl}
           required
@@ -1049,6 +1051,7 @@ https://example.com/path`}
               label=${msg("Extra URLs in Scope")}
               rows="3"
               autocomplete="off"
+              inputmode="url"
               value=${this.formState.customIncludeUrlList}
               placeholder=${`https://example.org
 https://example.net`}
@@ -1128,6 +1131,7 @@ https://example.net`}
                 label=${msg("List of URLs")}
                 rows="3"
                 autocomplete="off"
+                inputmode="url"
                 value=${this.formState.urlList}
                 placeholder=${`https://webrecorder.net/blog
 https://archiveweb.page/images/${"logo.svg"}`}
@@ -1200,6 +1204,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
         <sl-input
           name="pageLoadTimeoutSeconds"
           type="number"
+          inputmode="numeric"
           label=${msg("Page Load Timeout")}
           placeholder=${this.orgDefaults?.pageLoadTimeoutSeconds
             ? msg(
@@ -1222,6 +1227,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
         <sl-input
           name="behaviorTimeoutSeconds"
           type="number"
+          inputmode="numeric"
           label=${msg("Behavior Timeout")}
           placeholder=${this.orgDefaults?.behaviorTimeoutSeconds
             ? msg(
@@ -1254,6 +1260,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
         <sl-input
           name="pageExtraDelaySeconds"
           type="number"
+          inputmode="numeric"
           label=${msg("Delay Before Next Page")}
           placeholder=${"Default: 0"}
           value=${ifDefined(this.formState.pageExtraDelaySeconds ?? undefined)}
@@ -1287,6 +1294,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
             name="pageLimit"
             label=${msg("Max Pages")}
             type="number"
+            inputmode="numeric"
             value=${this.formState.pageLimit || ""}
             min=${minPages}
             max=${ifDefined(
@@ -1320,6 +1328,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
           placeholder=${msg("Default: Unlimited")}
           min="0"
           type="number"
+          inputmode="numeric"
         >
           <span slot="suffix">${msg("minutes")}</span>
         </sl-input>
@@ -1493,6 +1502,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
               name="scheduleDayOfMonth"
               label=${msg("Date")}
               type="number"
+              inputmode="numeric"
               min="1"
               max="31"
               value=${this.formState.scheduleDayOfMonth}

frontend/src/pages/org/workflows-new.ts

@@ -110,7 +110,7 @@ export class WorkflowsNew extends LiteElement {
     if (this.isCrawler && jobType) {
       return html`
         ${this.renderHeader()}
-        <h2 class="text-xl font-medium mb-6">
+        <h2 class="text-xl font-semibold mb-6">
           ${msg(html`New Workflow &mdash; ${jobTypeLabels[jobType]}`)}
         </h2>
         <btrix-workflow-editor
@@ -128,7 +128,7 @@ export class WorkflowsNew extends LiteElement {
 
     return html`
       ${this.renderHeader()}
-      <h2 class="text-xl font-medium mb-6">${msg("New Workflow")}</h2>
+      <h2 class="text-xl font-semibold mb-6">${msg("New Workflow")}</h2>
       ${when(this.isCrawler, this.renderChooseJobType, this.renderNoAccess)}
     `;
   }
@@ -140,7 +140,7 @@ export class WorkflowsNew extends LiteElement {
           transform: scale(1.05);
         }
       </style>
-      <h3 class="text-lg font-medium mb-3">${msg("Choose Crawl Type")}</h3>
+      <h3 class="text-lg font-semibold mb-3">${msg("Choose Crawl Type")}</h3>
       <div
         class="border rounded p-8 md:py-12 flex flex-col md:flex-row items-start justify-evenly"
       >