Style adjustments

src/back/routes/common/breadcrumbs.css

@@ -1,6 +1,5 @@
+/* stylelint-disable  no-descending-specificity */
 .breadcrumbs {
-	margin-top: 16px;
-	margin-left: 16px;
 	--bg: var(--color-brand-accent);
 	display: flex;
 	--height: 2rem;
@@ -9,10 +8,6 @@
 	align-items: center;
 	row-gap: 8px;
 
-	span {
-		padding: var(--padding);
-	}
-
 	a,
 	& > span {
 		display: inline-block;
@@ -20,6 +15,15 @@
 		font-size: 1rem;
 	}
 
+	& > span {
+		padding: var(--padding);
+
+		&:last-child:first-child {
+			/* only "home" */
+			display: none;
+		}
+	}
+
 	a {
 		text-decoration: none;
 		display: flex;

src/back/routes/common/navbar.ts

@@ -3,6 +3,7 @@ import { button } from "src/back/elements/button.js";
 import { tempstream } from "tempstream";
 import type { FlatTemplatable } from "tempstream";
 import { breadcrumbs } from "./breadcrumbs.js";
+import { insert_nbsp } from "@sealcode/jdd";
 
 export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
 	const { items: navbar_items } = await ctx.$app.collections["navbar-links"]
@@ -17,7 +18,7 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
 		.map(
 			(link) => /* HTML */ tempstream`<li>
 				${button({
-					text: link.text || "",
+					text: insert_nbsp(link.text || ""),
 					href: link.url || "",
 					variant: "accent1",
 					disabled: link.url == new URL(ctx.url, "https://a.com").pathname, // checking if it's the current path we're looking at

src/main.css

@@ -14,6 +14,10 @@ body {
 	min-height: 100vh;
 }
 
+a {
+	color: var(--color-brand-link-fg);
+}
+
 .grid-layout-main {
 	display: grid;
 	container-type: inline-size;
@@ -107,16 +111,24 @@ nav {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
-	padding: 0 16px;
 	margin-top: 24px;
+	column-gap: 16px;
+	row-gap: 16px;
 
 	ul {
 		display: flex;
+		flex-flow: row wrap;
+		align-items: center;
 		gap: 8px;
 		padding-left: 0;
+		margin: 0;
 
 		li {
 			list-style: none;
+
+			a {
+				margin: 0 !important;
+			}
 		}
 	}
 }
@@ -126,10 +138,6 @@ body.jdd-editor {
 	padding: 0 !important;
 }
 
-a {
-	color: var(--color-brand-link-fg);
-}
-
 .sealious-list__actions {
 	display: flex;
 	gap: 16px;