From 72a453b95e91f6c941e23a880e127a3a8ba65b7e Mon Sep 17 00:00:00 2001
From: Degreat <mail@degreat.co.uk>
Date: Sat, 10 Feb 2024 10:56:46 +0000
Subject: [PATCH] impoved styling

---
 client/app/components/post-input.tsx    |  2 +-
 client/app/lib/render-summary.server.ts | 10 +++++++---
 client/app/style.css                    |  4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/app/components/post-input.tsx b/client/app/components/post-input.tsx
index 5f68be5..f03bdec 100644
--- a/client/app/components/post-input.tsx
+++ b/client/app/components/post-input.tsx
@@ -156,7 +156,7 @@ function PostInput({ level = 0, parent }: Props) {
 					))}
 				</div>
 
-				<div className="flex justify-between">
+				<div className="flex justify-between flex-wrap gap-y-2">
 					<div className="flex gap-2">
 						<label className="flex items-center gap-2 rounded-lg px-2 py-1 font-medium bg-zinc-200 px-2 py-1 dark:bg-neutral-800 cursor-pointer w-[7.2rem]">
 							<div className="i-lucide-file-symlink opacity-50 shrink-0" />
diff --git a/client/app/lib/render-summary.server.ts b/client/app/lib/render-summary.server.ts
index 2a35b07..405b9a7 100644
--- a/client/app/lib/render-summary.server.ts
+++ b/client/app/lib/render-summary.server.ts
@@ -38,8 +38,7 @@ function removeLinks(): ReturnType<Plugin> {
 		visit(tree, "element", (child, index, parent) => {
 			if (child.tagName === "a") {
 				child.tagName = "span";
-				console.log(child.properties.className);
-				child.properties.className = "underline"
+				child.properties.className = "underline hyphens-auto";
 			}
 		});
 	};
@@ -83,7 +82,12 @@ function reduce(): ReturnType<Plugin> {
 						properties: { className: "tag" },
 						children: [{ type: "text", value: tagName }],
 					},
-					...child.children,
+					{
+						type: "element",
+						tagName: "div",
+						properties: {},
+						children: child.children,
+					},
 				];
 			}
 		});
diff --git a/client/app/style.css b/client/app/style.css
index a2590d2..1c4c884 100644
--- a/client/app/style.css
+++ b/client/app/style.css
@@ -56,7 +56,7 @@ input {
 }
 
 .post-content .reduce-heading :nth-child(2) {
-  @apply flex-1;
+  @apply flex-1 w-0 hyphens-auto;
 }
 
 .article :is(p, pre, h1, h2, h3, h4, h5, h6, blockquote):not(:last-child) {
@@ -96,7 +96,7 @@ input {
 }
 
 .article a {
-  @apply text-blue-600 dark:text-blue-500 underline;
+  @apply text-blue-600 dark:text-blue-500 underline hyphens-auto;
 }
 
 .article:first-child {