fix(examples): remove inline style usage due to CSP (#3373)

examples/api/dist/assets/index.css

@@ -1 +1 @@
-#dialog-filter.svelte-1eg58yg{width:260px}.flex-row.svelte-12ggtr4.svelte-12ggtr4{flex-direction:row}.grow.svelte-12ggtr4.svelte-12ggtr4{flex-grow:1}.window-controls.svelte-12ggtr4 input.svelte-12ggtr4{width:50px}.window-property.svelte-12ggtr4.svelte-12ggtr4{margin-top:12px}.window-property.svelte-12ggtr4 span.svelte-12ggtr4{font-size:.8rem}
+#dialog-filter.svelte-1eg58yg{width:260px}#request-body.svelte-1xfmj7b{width:100%;margin-right:10px;font-size:12px}form.svelte-1tppwwz.svelte-1tppwwz{margin-top:24px}.flex-row.svelte-1tppwwz.svelte-1tppwwz{flex-direction:row}.grow.svelte-1tppwwz.svelte-1tppwwz{flex-grow:1}.window-controls.svelte-1tppwwz input.svelte-1tppwwz{width:50px}.window-property.svelte-1tppwwz.svelte-1tppwwz{margin-top:12px}.window-property.svelte-1tppwwz span.svelte-1tppwwz{font-size:.8rem}.env-vars.svelte-1g38c1n{width:300px}.container.svelte-1fam3xt{margin:1em}.view-container.svelte-1fam3xt{width:15em;margin-left:.5em}#response.svelte-1fam3xt{white-space:pre-line}

examples/api/dist/global.css

@@ -186,3 +186,7 @@ main {
   border-left: 6px solid #ff0000;
   background: #f0f4f5;
 }
+
+#file-response {
+  height: 400px;
+}

examples/api/public/global.css

@@ -186,3 +186,7 @@ main {
   border-left: 6px solid #ff0000;
   background: #f0f4f5;
 }
+
+#file-response {
+  height: 400px;
+}

examples/api/src/App.svelte

@@ -115,7 +115,7 @@
 </script>
 
 <main>
-  <div class="flex row noselect just-around" style="margin=1em;" data-tauri-drag-region>
+  <div class="flex row noselect just-around container" data-tauri-drag-region>
     <img class="logo" src="tauri logo.png" height="60" on:click={onLogoClick} alt="logo" />
     <div>
       <a class="dark-link" target="_blank" href="https://tauri.studio/en/docs/get-started/intro">
@@ -130,7 +130,7 @@
     </div>
   </div>
   <div class="flex row">
-    <div style="width:15em; margin-left:0.5em">
+    <div class="view-container">
       {#each views as view}
       <p class="nv noselect {selected === view ? 'nv_selected' : ''}" on:click={()=> select(view)}
         >
@@ -142,7 +142,7 @@
       <svelte:component this={selected.component} {onMessage} {insecureRenderHtml} />
     </div>
   </div>
-  <div id="response" style="white-space: pre-line">
+  <div id="response">
     <p class="flex row just-around">
       <strong>Tauri Console</strong>
       <span class="nv" on:click={clear}>clear</span>
@@ -156,3 +156,18 @@
     {/each}
   </div>
 </main>
+
+<style>
+  .container {
+    margin: 1em;
+  }
+
+  .view-container {
+    width:15em;
+    margin-left:0.5em;
+  }
+
+  #response {
+    white-space: pre-line;
+  }
+</style>

examples/api/src/components/FileSystem.svelte

@@ -48,7 +48,7 @@
           } else {
             const value = String.fromCharCode.apply(null, response);
             insecureRenderHtml(
-              '<textarea id="file-response" style="height: 400px"></textarea><button id="file-save">Save</button>'
+              '<textarea id="file-response"></textarea><button id="file-save">Save</button>'
             );
             setTimeout(() => {
               const fileInput = document.getElementById("file-response");

examples/api/src/components/Http.svelte

@@ -50,8 +50,15 @@
     id="request-body"
     placeholder="Request body"
     rows="5"
-    style="width:100%;margin-right:10px;font-size:12px"
     bind:value={httpBody}
   />
   <button class="button" id="make-request"> Make request </button>
 </form>
+
+<style>
+#request-body {
+  width:100%;
+  margin-right:10px;
+  font-size:12px;
+}
+</style>

examples/api/src/components/Shell.svelte

@@ -63,6 +63,12 @@
   </div>
   <div>
     <input bind:value={cwd} placeholder="Working directory">
-    <input bind:value={env} placeholder="Environment variables" style="width: 300px">
+    <input class="env-vars" bind:value={env} placeholder="Environment variables">
   </div>
 </div>
+
+<style>
+.env-vars {
+  width: 300px;
+}
+</style>

examples/api/src/components/Window.svelte

@@ -266,11 +266,11 @@
     </div>
   </div>
 </div>
-<form style="margin-top: 24px" on:submit|preventDefault={setTitle_}>
+<form on:submit|preventDefault={setTitle_}>
   <input id="title" bind:value={windowTitle} />
   <button class="button" type="submit">Set title</button>
 </form>
-<form style="margin-top: 24px" on:submit|preventDefault={openUrl}>
+<form on:submit|preventDefault={openUrl}>
   <input id="url" bind:value={urlValue} />
   <button class="button" id="open-url"> Open URL </button>
 </form>
@@ -278,6 +278,10 @@
 <button class="button" on:click={createWindow}>New window</button>
 
 <style>
+  form {
+    margin-top: 24px;
+  }
+
   .flex-row {
     flex-direction: row;
   }

examples/streaming/index.html

@@ -4,11 +4,16 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      video {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
   </head>
   <body>
     <video
       id="video_source"
-      style="width: 100vw; height: 100vh"
       controls=""
       autoplay=""
       name="media"