Extend line range to antipode (20k km), increase city limit to 100, and fix info panel layout

frontend/src/App.jsx

@@ -15,6 +15,7 @@ const APP = () => {
   const [loading, setLoading] = useState(false);
   const [mapStyle, setMapStyle] = useState('light'); // 'light' or 'dark'
   const [tolerance, setTolerance] = useState(50);
+  const [selectedCity, setSelectedCity] = useState(null);
 
   useEffect(() => {
     // Initialize MapLibre map
@@ -158,6 +159,7 @@ const APP = () => {
 
   const handleShowLineOfSight = async () => {
     setLoading(true);
+    setSelectedCity(null);
     try {
       const response = await apiService.getLineOfSight(
         selectedPoint.lat, 
@@ -217,15 +219,16 @@ const APP = () => {
 
     // Add city markers
     data.conurbations.forEach((city, index) => {
-      const markerId = `city-${index}`;
+      const displayIndex = index + 1;
       
       // Create marker element
       const el = document.createElement('div');
       el.className = 'city-marker';
       el.innerHTML = `
+        <div class="marker-number">${displayIndex}</div>
         <div class="marker-dot"></div>
         <div class="marker-label">${city.name}</div>
-        <div class="marker-pop">${(city.population / 1000000).toFixed(1)}M</div>
+        <div class="marker-pop">${(city.population / 1000).toFixed(0)}k</div>
       `;
 
       // Add marker to map
@@ -249,7 +252,43 @@ const APP = () => {
 
   return (
     <div className="app-container">
-      <div className="map-container" ref={mapContainerRef}></div>
+      <div className="map-container" ref={mapContainerRef}>
+        {selectedCity && (
+          <div className="info-panel-modal">
+            <div className="info-panel-content">
+              <button className="close-btn" onClick={() => setSelectedCity(null)}>&times;</button>
+              <h2>{selectedCity.name}</h2>
+              <div className="info-grid">
+                <div className="info-item">
+                  <label>Country:</label>
+                  <span>{selectedCity.country}</span>
+                </div>
+                <div className="info-item">
+                  <label>Population:</label>
+                  <span>{selectedCity.population.toLocaleString()}</span>
+                </div>
+                <div className="info-item">
+                  <label>Coordinates:</label>
+                  <span>{selectedCity.lat.toFixed(4)}, {selectedCity.lon.toFixed(4)}</span>
+                </div>
+                <div className="info-item">
+                  <label>Distance from Start:</label>
+                  <span>{selectedCity.distance_km} km</span>
+                </div>
+                <div className="info-item">
+                  <label>Deviation from Line:</label>
+                  <span>{selectedCity.off_line_km} km</span>
+                </div>
+              </div>
+              <button className="action-btn-small" onClick={() => {
+                mapRef.current.flyTo({ center: [selectedCity.lon, selectedCity.lat], zoom: 8 });
+              }}>
+                📍 Go to City
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
       
       <div className="controls">
         <div className="control-group">
@@ -302,28 +341,33 @@ const APP = () => {
         {lineOfSightData && (
           <div className="results-panel">
             <h3>Conurbations Found ({lineOfSightData.conurbations.length})</h3>
+            <p className="hint">Click a city for details</p>
             <table>
               <thead>
                 <tr>
                   <th>#</th>
                   <th>City</th>
                   <th>Population</th>
-                  <th>Distance</th>
+                  <th>Dist.</th>
                 </tr>
               </thead>
               <tbody>
-                {lineOfSightData.conurbations.slice(0, 10).map((city, index) => (
-                  <tr key={city.id}>
+                {lineOfSightData.conurbations.slice(0, 50).map((city, index) => (
+                  <tr 
+                    key={city.id} 
+                    onClick={() => setSelectedCity(city)}
+                    className={selectedCity?.id === city.id ? 'selected-row' : ''}
+                  >
                     <td>{index + 1}</td>
                     <td>{city.name}</td>
-                    <td>{(city.population / 1000000).toFixed(1)}M</td>
-                    <td>{city.distance_km} km</td>
+                    <td>{(city.population / 1000).toFixed(0)}k</td>
+                    <td>{city.distance_km}km</td>
                   </tr>
                 ))}
               </tbody>
             </table>
-            {lineOfSightData.conurbations.length > 10 && (
-              <p className="more-info">... and {lineOfSightData.conurbations.length - 10} more cities</p>
+            {lineOfSightData.conurbations.length > 50 && (
+              <p className="more-info">... and {lineOfSightData.conurbations.length - 50} more</p>
             )}
           </div>
         )}