1

Author: vhtmui

src/lib/ZHeader/ZHeader.svelte

@@ -42,6 +42,8 @@
 	 */
 	let starts = $state(Array(Object.keys(others).length));
 
+	let headWidth = $derived([...snippets].reduce((acc, cur) => acc + cur.width, 0));
+	$inspect(headWidth, 'headWidth');
 	/**
 	 * To save configs
 	 * */
@@ -224,16 +226,16 @@
 			let copy = snippets.map((s) => s).sort((a, b) => get(a.start) - get(b.start));
 			for (let i = 0; i < copy.length; i++) {
 				if (i % 2 === 0 || i === copy.length - 1) {
-					const base = get(copy[i].start);
-					autoAdjust(base, bodyWidth, copy[i]);
+					const baseLine = get(copy[i].start);
+					autoAdjust(baseLine, bodyWidth, copy[i]);
 				}
 			}
 			saveCfg();
 		}, 501);
 	}}
 />
 
-<div id="rootHead">
+<div id="rootHead" style="min-width: {headWidth}px;">
 	{#each snippets as snippet, i}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div

src/routes/+layout.svelte

@@ -350,26 +350,13 @@
 			}
 			& div.topInnerContainer {
 				max-width: var(--main-max-width);
+				min-width: fit-content;
 				padding: 0 1rem 0 0;
 				margin-left: auto;
 				margin-right: auto;
 				display: flex;
 				align-items: center;
 				height: var(--header-block-height);
-				& header.top {
-					box-sizing: border-box;
-					font-weight: normal;
-					padding: 0 2vw 0 1rem;
-					width: 100%;
-					display: flex;
-					flex: 1 1;
-					gap: 0.5rem;
-					align-items: center;
-					justify-content: flex-start;
-					& * {
-						pointer-events: auto;
-					}
-				}
 			}
 		}
 		main {