607 implement clickable links and design aligned text padding on news page

frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.module.scss

@@ -87,6 +87,8 @@
     margin: 0 auto;
     @media (max-width: breakpoint(md)) {
         font: var(--font-sw-l);
+        padding: 10px 1em;
+        text-align: left;
     }
 }
 
@@ -99,6 +101,8 @@
     margin: 0 auto;
     @media (max-width: breakpoint(md)) {
         font: var(--font-sw-m);
+        padding: 10px 1em;
+        text-align: left;
     }
 }
 
@@ -108,14 +112,13 @@
     line-height: 28px;
     padding: 10px 5em;
     text-align: left;
-    width: 80%;
+    width: 100%;
     white-space: pre-line;
 }
 
 @media (max-width: breakpoint(md)) {
     .text {
         padding: 10px 1em;
-        width: 98%;
     }
 }
 
@@ -158,15 +161,25 @@
     padding: 0 40px 20px 40px;
     width: 100%;
     gap: 16px;
+    @media (max-width: breakpoint(md)) {
+        justify-content: flex-start;
+        padding: 10px 1em;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px
+    }
 }
 
 .shareButton {
     color: var(--primary-color);
     display: flex;
     align-items: center;
     align-self: flex-start;
-    padding: 0 5em;
+    padding: 0 5em; 
     margin-top: 16px;
+    @media (max-width: breakpoint(md)) {
+        padding: 0 1em;
+    }
 }
 
 .author {

frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx

@@ -15,10 +15,38 @@ import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button';
 import chevronleft from '@/shared/assets/icons/ChevronLeftBlack.svg';
 import chevronright from '@/shared/assets/icons/ChevronRightBlack.svg';
 import { useRouter, useParams } from 'next/navigation';
+import { linkify } from '@/shared/ui/v2/Chatbot/utils/linkify';
 import { useClientTranslation } from '@/shared/i18n';
 import { NewsCard } from '@/widgets/NewsCard';
 import { ShareButton } from '@/shared/ui/v2/ShareButton';
 
+type HeroImageProps = {
+    picture?: string;
+};
+
+const HeroImage = ({ picture }: HeroImageProps) => {
+    if (!picture) return <div className={cls.noImageContainer} />;
+
+    return (
+        <div className={cls.imageContainer}>
+            <Image
+                src={picture}
+                alt=""
+                className={cls.imageBlur}
+                width={100}
+                height={600}
+            />
+            <Image
+                src={picture}
+                alt=""
+                className={cls.image}
+                width={100}
+                height={600}
+            />
+        </div>
+    );
+};
+
 const NewsElementPage = () => {
     useScrollToTop();
     const params = useParams();
@@ -45,6 +73,9 @@ const NewsElementPage = () => {
     const picture = post.titlePicture?.id
         ? `${directusBaseUrl}/assets/${post.titlePicture.id}`
         : undefined;
+
+    const bodyHtml = linkify(post?.bodyText ?? '');
+
     return (
         <Container>
             <div className={cls.navButtons}>
@@ -84,26 +115,7 @@ const NewsElementPage = () => {
                 </Button>
             </div>
             <div className={classNames(cls.NewsElementPage)}>
-                {picture ? (
-                    <div className={cls.imageContainer}>
-                        <Image
-                            src={picture}
-                            alt={''}
-                            className={cls.imageBlur}
-                            width={100}
-                            height={600}
-                        />
-                        <Image
-                            src={picture}
-                            alt={''}
-                            className={cls.image}
-                            width={100}
-                            height={600}
-                        />
-                    </div>
-                ) : (
-                    <div className={cls.noImageContainer} />
-                )}
+                <HeroImage picture={picture} />
 
                 <h1 className={cls.title}>{post?.title}</h1>
 
@@ -114,7 +126,10 @@ const NewsElementPage = () => {
                     <span className={cls.date}>{post?.date || 'Date/Time'}</span>
                 </div>
 
-                <p className={cls.text}>{post?.bodyText}</p>
+                <div
+                    className={cls.text}
+                    dangerouslySetInnerHTML={{ __html: bodyHtml }}
+                />
 
                 <div className={cls.shareButton}>
                     <ShareButton>

frontend-next-migration/src/shared/ui/v2/Chatbot/utils/linkify.ts

@@ -29,6 +29,6 @@ export function linkify(text: string): string {
         const hrefRaw = url.startsWith('www.') ? `https://${url}` : url;
         const href = encodeURI(hrefRaw).replace(/"/g, '"');
 
-        return `<a href="${href}" style="color:#121212; text-decoration:underline;">${url}</a>${escapeHtml(trailing)}`;
+        return `<a href="${href}" target="_blank" rel="noopener noreferrer" style="color:#ffa100; text-decoration:none;">${url}</a>${escapeHtml(trailing)}`;
     });
 }