@signal9/era-ui 4.3.0 → 4.3.2

package/dist/apps/notes/notes.svelte

@@ -151,24 +151,22 @@
 >
 	<!-- Sidebar: filter + note list -->
 	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
-		<!-- md, not the default lg: this is a compact toolbar of xxs controls, and
-		     at lg the filter field towered over the 24px rows beneath it. The
-		     filter is chromeless — the bar IS its container, so a second well
-		     inside it just draws a box around a box. -->
-		<Bar
-			size="md"
-			class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
-		>
+		<!-- Default lg bar holding md controls, which is the pairing Bar documents:
+		     (32-24)/2 lands on the bar's own xs-inset-sm padding, so the field sits
+		     concentric. This was md with a chromeless field — compact, but it made
+		     the filter the ONLY input in the library without a field fill. At md a
+		     real field is the same height as the bar and overflows it by the
+		     border. -->
+		<Bar class="shrink-0 rounded-none border-b border-divider-faded">
 			<Input
 				icon={Search}
-				bare
 				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
 				bind:value={query}
 			/>
-			<Button icon size="xxs" aria-label="New note" title="New note" onclick={createNote}>
+			<Button icon aria-label="New note" title="New note" onclick={createNote}>
 				<Plus />
 			</Button>
 		</Bar>
@@ -307,15 +305,11 @@
 	<!-- Document pane -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if selected}
-			<!-- md and xxs-padded, exactly like the sidebar's filter bar: the two
-			     headers sit side by side across the top of the app, so an lg bar
-			     here left the document header 8px taller than the list header. -->
-			<Bar
-				size="md"
-				class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
-			>
+			<!-- Matches the sidebar's filter bar exactly — the two headers sit side by
+			     side across the top of the app, so they must be the same tier. -->
+			<Bar class="shrink-0 rounded-none border-b border-divider-faded">
 				<Popover.Root bind:open={iconPickerOpen}>
-					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
+					<Popover.Trigger icon aria-label="Change icon" title="Change icon">
 						{#if selected.icon}
 							<span aria-hidden="true">{selected.icon}</span>
 						{:else}
@@ -359,7 +353,6 @@
 				</Popover.Root>
 
 				<Input
-					bare
 					class="min-w-0 flex-1"
 					aria-label="Note title"
 					placeholder="Untitled"