move ticker

src/App.jsx

@@ -17,7 +17,8 @@ import {
   SolarPanel,
   PropagationPanel,
   DXpeditionPanel,
-  PSKReporterPanel
+  PSKReporterPanel,
+  DXNewsTicker
 } from './components';
 
 // Hooks
@@ -698,6 +699,7 @@ const App = () => {
                 showWSJTX={mapLayers.showWSJTX}
                 onToggleSatellites={toggleSatellites}
                 hoveredSpot={hoveredSpot}
+                hideOverlays={true}
               />
             </div>
 
@@ -775,6 +777,18 @@ const App = () => {
                   ))}
                 </div>
               </div>
+
+              {/* DX News - sidebar footer */}
+              <div style={{
+                flexShrink: 0,
+                borderTop: '1px solid var(--border-color)',
+                background: 'var(--bg-panel)',
+                height: '28px',
+                position: 'relative',
+                overflow: 'hidden'
+              }}>
+                <DXNewsTicker sidebar={true} />
+              </div>
             </div>
           </div>
         </div>
@@ -948,6 +962,7 @@ const App = () => {
                 showWSJTX={mapLayers.showWSJTX}
                 onToggleSatellites={toggleSatellites}
                 hoveredSpot={hoveredSpot}
+                hideOverlays={true}
               />
               <div style={{
                 position: 'absolute',
@@ -1001,6 +1016,18 @@ const App = () => {
                   </div>
                 ))}
               </div>
+
+              {/* DX News - sidebar footer */}
+              <div style={{
+                flexShrink: 0,
+                borderTop: '1px solid var(--border-color)',
+                background: 'var(--bg-panel)',
+                height: '28px',
+                position: 'relative',
+                overflow: 'hidden'
+              }}>
+                <DXNewsTicker sidebar={true} />
+              </div>
             </div>
           </div>
         </div>

src/components/DXNewsTicker.jsx

@@ -4,7 +4,7 @@
  */
 import React, { useState, useEffect, useRef } from 'react';
 
-export const DXNewsTicker = () => {
+export const DXNewsTicker = ({ sidebar = false }) => {
   const [news, setNews] = useState([]);
   const [loading, setLoading] = useState(true);
   const tickerRef = useRef(null);
@@ -57,7 +57,14 @@ export const DXNewsTicker = () => {
   return (
     <div
       ref={tickerRef}
-      style={{
+      style={sidebar ? {
+        width: '100%',
+        height: '100%',
+        background: 'transparent',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center'
+      } : {
         position: 'absolute',
         bottom: '8px',
         left: '8px',

src/components/WorldMap.jsx

@@ -37,7 +37,8 @@ export const WorldMap = ({
   showPSKReporter,
   showWSJTX,
   onToggleSatellites, 
-  hoveredSpot 
+  hoveredSpot,
+  hideOverlays
 }) => {
   const mapRef = useRef(null);
   const mapInstanceRef = useRef(null);
@@ -836,9 +837,10 @@ export const WorldMap = ({
       )}
       
       {/* DX News Ticker - left side of bottom bar */}
-      <DXNewsTicker />
+      {!hideOverlays && <DXNewsTicker />}
 
       {/* Legend - right side */}
+      {!hideOverlays && (
       <div style={{
         position: 'absolute',
         bottom: '8px',
@@ -885,6 +887,7 @@ export const WorldMap = ({
           <span style={{ color: '#aaaaaa' }}>☽ Moon</span>
         </div>
       </div>
+      )}
     </div>
   );
 };