From ab7d67b3a07f1a0d2843529be8fe74b960d6eb58 Mon Sep 17 00:00:00 2001
From: Belem Zhang <belem.zhang@intel.com>
Date: Wed, 11 Oct 2023 14:17:27 +0800
Subject: [PATCH] ui

---
 src/lib/assets/css/global.css            | 31 +++++++++++++++++++++++-
 src/lib/components/ConfigBackends.svelte |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/lib/assets/css/global.css b/src/lib/assets/css/global.css
index fe5127d..8e96bd0 100644
--- a/src/lib/assets/css/global.css
+++ b/src/lib/assets/css/global.css
@@ -692,13 +692,30 @@ padding: 2px 4px 2px 4px;
 }
 
 @media (max-width: 900px) { 
+
+   .config .backends {
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+  }
+
+  .config .backends .group {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .group.true {
+    background-color: transparent;
+    border: 0px solid transparent;
+  }
+
   .group span {
     width: auto !important;
     display: flex;
     align-items: center;
   }
 
-  #webnn_cpu_4, #webnn_gpu {
+  #webnn_cpu_4, #webnn_gpu, #webnn_npu {
     margin-top: 4px;
   }
 
@@ -708,6 +725,18 @@ padding: 2px 4px 2px 4px;
 }
 
 @media (max-width: 800px) { 
+
+   .config .backends {
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+  }
+
+  .config .backends .group {
+    display: flex;
+    flex-direction: row;
+  }
+
   .group span {
     width: auto !important;
     display: flex;
diff --git a/src/lib/components/ConfigBackends.svelte b/src/lib/components/ConfigBackends.svelte
index 64d869a..1f8e464 100644
--- a/src/lib/components/ConfigBackends.svelte
+++ b/src/lib/components/ConfigBackends.svelte
@@ -222,7 +222,7 @@
 	<div class="group {backends.webnn_npu}">
 		<span>NPU</span>
 		<div class="block">
-			<label class={backends.webnn_npu.toString()} title="WebNN NPU">
+			<label id="webnn_npu" class={backends.webnn_npu.toString()} title="WebNN NPU">
 				<input type="checkbox" on:change={() => toggleBackend('webnn_npu')} />
 				WebNN
 			</label>