zunanji pripomocki (Musiknachrichten, Aktuelle Nachrichten) razmaknjeni: en pripomocek na pet clankov, drugi primerek se zacne z zamikom, da ne ponavlja istih vrstic

client/src/components/breaking-news-widget.tsx

@@ -12,12 +12,14 @@ interface NewsItem {
 
 const VISIBLE_COUNT = 5;
 
-export function BreakingNewsWidget() {
+// startOffset zamakne zacetek vrtenja: dva primerka na isti strani sicer
+// kazeta identicnih pet vrstic.
+export function BreakingNewsWidget({ startOffset = 0 }: { startOffset?: number } = {}) {
   const { data: news, isLoading } = useQuery<NewsItem[]>({
     queryKey: ["/api/breaking-news"],
   });
 
-  const [offset, setOffset] = useState(0);
+  const [offset, setOffset] = useState(startOffset);
   const [paused, setPaused] = useState(false);
 
   // Isti izvajalec ne sme stati drug ob drugem: vsaj 5 mest razmika.

client/src/components/news-widget.tsx

@@ -12,12 +12,14 @@ interface NewsItem {
 
 const VISIBLE_COUNT = 5;
 
-export function NewsWidget() {
+// startOffset zamakne zacetek vrtenja: dva primerka na isti strani sicer
+// kazeta identicnih pet vrstic.
+export function NewsWidget({ startOffset = 0 }: { startOffset?: number } = {}) {
   const { data: news, isLoading } = useQuery<NewsItem[]>({
     queryKey: ["/api/news-feed"],
   });
 
-  const [offset, setOffset] = useState(0);
+  const [offset, setOffset] = useState(startOffset);
   const [paused, setPaused] = useState(false);
 
   // Isti izvajalec ne sme stati drug ob drugem: vsaj 5 mest razmika.

client/src/pages/home.tsx

@@ -828,21 +828,23 @@ export default function Home() {
   const widgets = useMemo(() => [
     { id: "news", el: <div key="news" className="flex flex-col gap-4"><NewsWidget /></div> },
     { id: "breaking", el: <div key="breaking" className="flex flex-col gap-4"><BreakingNewsWidget /></div> },
-    { id: "news2", el: <div key="news2" className="flex flex-col gap-4"><NewsWidget /></div> },
+    { id: "news2", el: <div key="news2" className="flex flex-col gap-4"><NewsWidget startOffset={5} /></div> },
-    { id: "breaking2", el: <div key="breaking2" className="flex flex-col gap-4"><BreakingNewsWidget /></div> },
+    { id: "breaking2", el: <div key="breaking2" className="flex flex-col gap-4"><BreakingNewsWidget startOffset={5} /></div> },
   ], []);
 
   const gridItems = useMemo(() => {
     const items: { type: "article" | "widget" | "ad"; key: string; article?: Article; widget?: typeof widgets[0] }[] = [];
     let ai = 0;
     let wi = 0;
-    const widgetRows = Math.ceil(widgets.length / 2);
+    // Pripomocki z zunanjimi viri ne smejo stati skupaj: prej sta bila dva v isti
-
+    // vrstici in nato spet dva v naslednji, kar je izgledalo kot podvojen blok.
-    for (let r = 0; r < widgetRows; r++) {
+    // Zdaj gre en pripomocek in za njim pet clankov.
-      if (wi < widgets.length) items.push({ type: "widget", key: `w-${widgets[wi].id}`, widget: widgets[wi++] });
+    const RAZMIK_PRIPOMOCKOV = 5;
-      if (wi < widgets.length) items.push({ type: "widget", key: `w-${widgets[wi].id}`, widget: widgets[wi++] });
+    while (wi < widgets.length) {
-      if (ai < spaced.length) items.push({ type: "article", key: `a-${spaced[ai].id}`, article: spaced[ai++] });
+      items.push({ type: "widget", key: `w-${widgets[wi].id}`, widget: widgets[wi++] });
-      if (ai < spaced.length) items.push({ type: "article", key: `a-${spaced[ai].id}`, article: spaced[ai++] });
+      for (let k = 0; k < RAZMIK_PRIPOMOCKOV && ai < spaced.length; k++) {
+        items.push({ type: "article", key: `a-${spaced[ai].id}`, article: spaced[ai++] });
+      }
     }
 
     while (ai < spaced.length) {
@@ -1005,8 +1007,8 @@ export default function Home() {
 
         <LazySection minHeight="280px">
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <NewsWidget key="extra-news" />
+            <NewsWidget key="extra-news" startOffset={10} />
-            <BreakingNewsWidget key="extra-breaking" />
+            <BreakingNewsWidget key="extra-breaking" startOffset={10} />
             <div className="h-full"><ArticleCardAd /></div>
           </div>
         </LazySection>