From fe534a787519d8f58602757edadebe445672c56d Mon Sep 17 00:00:00 2001
From: echo <petrovskidimitar@yandex.com>
Date: Sun, 8 Mar 2026 21:53:27 +0100
Subject: [PATCH] text formating

---
 frontend/src/components/routes/ArticleDetailComponent.tsx | 6 +++++-
 pwa/src/components/routes/ArticleDetailComponent.tsx      | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/routes/ArticleDetailComponent.tsx b/frontend/src/components/routes/ArticleDetailComponent.tsx
index 006922b..c834cd1 100644
--- a/frontend/src/components/routes/ArticleDetailComponent.tsx
+++ b/frontend/src/components/routes/ArticleDetailComponent.tsx
@@ -151,10 +151,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
       )}
 
       <div className="prose prose-slate max-w-none">
-        <div className="text-lg leading-relaxed mb-6">
+        <div className="text-lg leading-relaxed mb-6 text-justify">
           <ReactMarkdown 
             remarkPlugins={[remarkGfm]}
             components={{
+              p: (props) => <p {...props} className="mb-4 text-justify" />,
+              ul: (props) => <ul {...props} className="list-disc list-outside ml-6 mb-4 space-y-2" />,
+              ol: (props) => <ol {...props} className="list-decimal list-outside ml-6 mb-4 space-y-2" />,
+              li: (props) => <li {...props} className="text-justify" />,
               img: (props) => (
                 <img 
                   {...props} 
diff --git a/pwa/src/components/routes/ArticleDetailComponent.tsx b/pwa/src/components/routes/ArticleDetailComponent.tsx
index 1c878f0..10a63e9 100644
--- a/pwa/src/components/routes/ArticleDetailComponent.tsx
+++ b/pwa/src/components/routes/ArticleDetailComponent.tsx
@@ -151,10 +151,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
       )}
 
       <div className="prose prose-slate max-w-none">
-        <div className="text-lg leading-relaxed mb-6">
+        <div className="text-lg leading-relaxed mb-6 text-justify">
           <ReactMarkdown 
             remarkPlugins={[remarkGfm]}
             components={{
+              p: (props) => <p {...props} className="mb-4 text-justify" />,
+              ul: (props) => <ul {...props} className="list-disc list-outside ml-6 mb-4 space-y-2" />,
+              ol: (props) => <ol {...props} className="list-decimal list-outside ml-6 mb-4 space-y-2" />,
+              li: (props) => <li {...props} className="text-justify" />,
               img: (props) => (
                 <img 
                   {...props}