diff --git a/cockpit/static/css/export-intel.css b/cockpit/static/css/export-intel.css index 26f082d..8f5d85b 100644 --- a/cockpit/static/css/export-intel.css +++ b/cockpit/static/css/export-intel.css @@ -42,8 +42,8 @@ .ei-filter-clear { font-size: 0.72rem; opacity: 0.85; } .ei-split { align-items: stretch; } -.ei-split > .ei-map-wrap { grid-column: 1; } -.ei-split > .ei-panel { grid-column: 2; } +.ei-split > .ei-map-wrap { width: 100%; } +.ei-split > .ei-panel { width: 100%; max-height: none; } .ei-progress-overlay { position: fixed; inset: 0; z-index: 1200; @@ -90,8 +90,22 @@ .ei-edit-full { grid-column: 1 / -1; } .ei-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; } -.ei-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 420px; } -@media (max-width: 900px) { .ei-split { grid-template-columns: 1fr; } } +.ei-split { + display: flex; + flex-direction: column; + gap: 1rem; + min-height: 0; +} +@media (min-width: 1200px) { + .ei-split.ei-split-side { + display: grid; + grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); + grid-template-rows: minmax(480px, 62vh); + align-items: stretch; + } + .ei-split.ei-split-side > .ei-map-wrap { grid-column: 1; grid-row: 1; height: 100%; min-height: 480px; } + .ei-split.ei-split-side > .ei-panel { grid-column: 2; grid-row: 1; max-height: 62vh; overflow: auto; } +} .ei-map-wrap { position: relative; } .ei-map-loading { @@ -110,8 +124,19 @@ .ei-map-truncated { margin: 0 0 0.65rem; font-size: 0.75rem; color: #64748b; } .ei-map-error { margin: 0 0 0.65rem; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid rgba(251,113,133,0.35); background: rgba(127,29,29,0.25); color: #fecdd3; font-size: 0.82rem; } -.ei-map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(14,165,233,0.2); height: 420px; min-height: 420px; background: #0a0e14; } -.ei-map-wrap #ei-map { height: 420px; width: 100%; } +.ei-map-wrap { + border-radius: 14px; + overflow: hidden; + border: 1px solid rgba(14,165,233,0.2); + height: min(62vh, 720px); + min-height: 480px; + background: #0a0e14; +} +.ei-map-wrap #ei-map { + height: 100%; + min-height: 480px; + width: 100%; +} /* Leaflet popups — rich card */ .ei-map-wrap .leaflet-popup-content-wrapper, @@ -399,7 +424,7 @@ .ei-map-empty-actions { display: flex; gap: 0.5rem; margin-top: 0.65rem; flex-wrap: wrap; } .ei-panel { border-radius: 14px; padding: 0.75rem; background: rgba(10,14,20,0.85); border: 1px solid rgba(148,163,184,0.12); } -.ei-table-wrap { overflow-x: auto; max-height: 480px; } +.ei-table-wrap { overflow-x: auto; max-height: min(42vh, 520px); } .ei-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .ei-table th, .ei-table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid rgba(148,163,184,0.08); } .ei-table th { color: #94a3b8; font-weight: 600; position: sticky; top: 0; background: #0f1419; } diff --git a/cockpit/static/js/export-intel-map.js b/cockpit/static/js/export-intel-map.js index 1559bf5..8f0880f 100644 --- a/cockpit/static/js/export-intel-map.js +++ b/cockpit/static/js/export-intel-map.js @@ -165,6 +165,7 @@ window.ExportIntelMap = (function () { map.invalidateSize(true); setTimeout(function () { if (map) map.invalidateSize(true); }, 120); setTimeout(function () { if (map) map.invalidateSize(true); }, 400); + setTimeout(function () { if (map) map.invalidateSize(true); }, 800); } function init(containerId) { diff --git a/cockpit/templates/export_intel.html b/cockpit/templates/export_intel.html index 7d647c9..6777022 100644 --- a/cockpit/templates/export_intel.html +++ b/cockpit/templates/export_intel.html @@ -4,7 +4,7 @@ - +