Merge pull request #3056 from open-webui/dev

refac

src/app.html

@@ -83,54 +83,53 @@
 				src="/logo.svg"
 			/>
 
-			<img
-				id="logo-her"
+			<div
 				style="
 					position: absolute;
-					width: 13rem;
-					height: 13rem;
 					top: 33%;
 					left: 50%;
-					margin-left: -6.5rem;
+
+					width: 24rem;
+					margin-left: -12rem;
+
+					display: flex;
+					flex-direction: column;
+					align-items: center;
 				"
+			>
+				<img
+					id="logo-her"
+					style="width: 13rem; height: 13rem"
 					src="/logo.svg"
 					class="animate-pulse-fast"
 				/>
 
+				<div style="position: relative; width: 24rem; margin-top: 0.5rem">
 					<div
 						id="progress-background"
 						style="
 							position: absolute;
-					top: 58%;
-					left: 50%;
-
-					margin-left: -12rem;
-
-					width: 24rem;
+							width: 100%;
 							height: 0.75rem;
+
 							border-radius: 9999px;
 							background-color: #fafafa9a;
 						"
-				class="bg-white"
 					></div>
 
 					<div
 						id="progress-bar"
 						style="
 							position: absolute;
-					top: 58%;
-					left: 50%;
-
-					margin-left: -12rem;
-
+							width: 100%;
 							height: 0.75rem;
 							border-radius: 9999px;
 							background-color: #fff;
-
-					width: 0rem;
 						"
 						class="bg-white"
 					></div>
+				</div>
+			</div>
 
 			<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
 				Footer content
@@ -188,6 +187,16 @@
 		display: block;
 	}
 
+	@media (max-width: 24rem) {
+		html.her #progress-background {
+			display: none;
+		}
+
+		html.her #progress-bar {
+			display: none;
+		}
+	}
+
 	@keyframes pulse {
 		50% {
 			opacity: 0.65;

src/routes/+layout.svelte

@@ -129,7 +129,7 @@
 				const progressBar = document.getElementById('progress-bar');
 
 				if (progressBar) {
-					progressBar.style.width = `${value * 0.24}rem`;
+					progressBar.style.width = `${value}%`;
 				}
 			});