From f64b8ba53c57683934b959905fc0b017141427e4 Mon Sep 17 00:00:00 2001
From: streaper2 <streaper2@gmail.com>
Date: Sun, 10 May 2026 13:54:50 +0200
Subject: [PATCH] UI: simplify article layout and fix text wrapping

---
 app/blog/[id]/page.tsx | 29 +++++++++++++++--------------
 app/globals.css        |  5 ++---
 next-env.d.ts          |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index 1c214b1..5a29697 100644
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -63,24 +63,25 @@ export default async function BlogPostPage({ params }: Props) {
   }
 
   return (
-    <article className="bg-white min-h-screen">
-      {/* Hero Image */}
-      <div className="w-full h-64 md:h-96 relative">
-        <img
-          src={post.imageUrl}
-          alt={post.title}
-          className="w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
-        <div className="absolute bottom-0 left-0 w-full p-4 sm:p-8 max-w-4xl mx-auto">
-          <Link href="/blog" className="inline-flex items-center text-white/80 hover:text-white mb-4 text-sm font-medium transition-colors">
+    <article className="bg-gray-50 min-h-screen py-12">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Navigation */}
+        <div className="mb-8">
+          <Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
             <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
           </Link>
         </div>
-      </div>
 
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-20 relative z-10">
-        <div className="bg-white rounded-xl shadow-xl p-6 md:p-10 border border-gray-100">
+        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100">
+          {/* Header Image */}
+          <div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
+            <img
+              src={post.imageUrl}
+              alt={post.title}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
           {/* Header */}
           <header className="mb-8 border-b border-gray-100 pb-8">
             <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
diff --git a/app/globals.css b/app/globals.css
index b63cb03..244451a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -26,11 +26,10 @@ body {
 }
 
 .prose {
-  text-align: justify;
+  text-align: left;
   hyphens: none;
   word-break: normal;
-  overflow-wrap: normal;
-  overflow-x: auto;
+  overflow-wrap: break-word;
 }
 
 .prose p {
diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.