fix for safari: use type='text', move input out of label

dist/frontend.js

@@ -315,9 +315,14 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
       max-height: calc(100vh - 279px);
     }
 
-    input.file-name:invalid {
+    input.input.file-name:invalid {
       border: 1px dashed red;
     }
+    input.input.file-name {
+      max-width: 100%;
+      border-width: 1px;
+      margin-left: -1px;
+    }
 
     `)}render(){return O`
     <section class="section no-top-padding">
@@ -325,7 +330,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
         <nav class="panel is-info">
           <p class="panel-heading">Load Web Archive</p>
           <div class="extra-padding panel-block file has-name">
-            <form class="container" @submit="${this.onStartLoad}">
+            <form class="container is-flex" @submit="${this.onStartLoad}">
               <label class="file-label">
                 <input class="file-input"
                   @click="${e=>e.currentTarget.value=null}"
@@ -338,10 +343,12 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
                     Choose File...
                   </span>
                 </span>
+              </label>
+
               <div class="field has-addons">
                 <p class="control is-expanded">
-                    <input style="max-width: 100%" class="file-name input" type="url"
+                  <input class="file-name input" type="text"
-                    name="filename"
+                  name="filename" id="filename"
                   pattern="^((file|http|https|s3):\/\/.*\.(warc|warc.gz|har|zip|waz))|(googledrive:\/\/[^\/\s]+)$"
                   .value="${this.fileDisplayName}"
                   @input="${this.onInput}"
@@ -352,7 +359,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
                   <button type="submit" class="button is-primary">Load</button>
                 </div>
               </div>
-              </label>
+
             </form>
           </div>
         </nav>
@@ -369,7 +376,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
                 <div>
                   <span class="subtitle"><a href="?source=${e.sourceUrl}">${e.title||e.filename}</a></span>
                   <p><i>Source: ${e.sourceUrl}</i></p>
-                  ${e.sourceUrl.startsWith("googledrive://")?O`
+                  ${e.sourceUrl&&e.sourceUrl.startsWith("googledrive://")?O`
                   <p><i>Filename: ${e.filename}</i></p>`:""}
                 </div>
               </div>

src/frontend.js

@@ -555,9 +555,14 @@ class WrIndex extends LitElement
       max-height: calc(100vh - 279px);
     }
 
-    input.file-name:invalid {
+    input.input.file-name:invalid {
       border: 1px dashed red;
     }
+    input.input.file-name {
+      max-width: 100%;
+      border-width: 1px;
+      margin-left: -1px;
+    }
 
     `);
   }
@@ -569,7 +574,7 @@ class WrIndex extends LitElement
         <nav class="panel is-info">
           <p class="panel-heading">Load Web Archive</p>
           <div class="extra-padding panel-block file has-name">
-            <form class="container" @submit="${this.onStartLoad}">
+            <form class="container is-flex" @submit="${this.onStartLoad}">
               <label class="file-label">
                 <input class="file-input"
                   @click="${(e) => e.currentTarget.value = null}"
@@ -582,10 +587,12 @@ class WrIndex extends LitElement
                     Choose File...
                   </span>
                 </span>
+              </label>
+
               <div class="field has-addons">
                 <p class="control is-expanded">
-                    <input style="max-width: 100%" class="file-name input" type="url"
+                  <input class="file-name input" type="text"
-                    name="filename"
+                  name="filename" id="filename"
                   pattern="^((file|http|https|s3):\/\/.*\.(warc|warc.gz|har|zip|waz))|(googledrive:\/\/[^\/\s]+)$"
                   .value="${this.fileDisplayName}"
                   @input="${this.onInput}"
@@ -596,7 +603,7 @@ class WrIndex extends LitElement
                   <button type="submit" class="button is-primary">Load</button>
                 </div>
               </div>
-              </label>
+
             </form>
           </div>
         </nav>
@@ -613,7 +620,7 @@ class WrIndex extends LitElement
                 <div>
                   <span class="subtitle"><a href="?source=${coll.sourceUrl}">${coll.title || coll.filename}</a></span>
                   <p><i>Source: ${coll.sourceUrl}</i></p>
-                  ${coll.sourceUrl.startsWith("googledrive://") ? html`
+                  ${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://") ? html`
                   <p><i>Filename: ${coll.filename}</i></p>` : ''}
                 </div>
               </div>