From de00d603fcf8606a6044809e7e61d01f1945d332 Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Fri, 20 Mar 2026 09:30:59 +0100
Subject: [PATCH] style: updated indicator items to double-line layout

---
 css/indicators-new.css        | 24 +++++++++++++++++-------
 js/ui/indicators-panel-new.js | 16 +++++++++++-----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/css/indicators-new.css b/css/indicators-new.css
index a67d85d..3bc5a5a 100644
--- a/css/indicators-new.css
+++ b/css/indicators-new.css
@@ -161,16 +161,23 @@
 .indicator-item-main {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 8px 10px;
+    gap: 8px;
+    padding: 10px 12px;
     cursor: pointer;
 }
 
-.indicator-name {
+.indicator-info {
     flex: 1;
-    font-size: 12px;
+    display: flex;
+    flex-direction: column;
+    min-width: 0; /* Important for ellipsis */
+    gap: 2px;
+}
+
+.indicator-name {
+    font-size: 13px;
     color: var(--tv-text);
-    font-weight: 500;
+    font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -179,13 +186,16 @@
 .indicator-desc {
     font-size: 11px;
     color: var(--tv-text-secondary);
-    margin-left: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .indicator-actions {
     display: flex;
     gap: 4px;
-    margin-left: auto;
+    margin-left: 8px;
+    flex-shrink: 0;
 }
 
 .indicator-btn {
diff --git a/js/ui/indicators-panel-new.js b/js/ui/indicators-panel-new.js
index dfb67cf..6eb9abd 100644
--- a/js/ui/indicators-panel-new.js
+++ b/js/ui/indicators-panel-new.js
@@ -297,8 +297,10 @@ function renderIndicatorItem(indicator, isFavorite) {
     return `
         <div class="indicator-item ${isFavorite ? 'favorite' : ''}" data-type="${indicator.type}">
             <div class="indicator-item-main">
-                <span class="indicator-name">${indicator.name}</span>
-                <span class="indicator-desc">${indicator.description || ''}</span>
+                <div class="indicator-info">
+                    <span class="indicator-name">${indicator.name}</span>
+                    <span class="indicator-desc">${indicator.description || ''}</span>
+                </div>
                 <div class="indicator-actions">
                     <button class="indicator-btn add" data-type="${indicator.type}" title="Add to chart">+</button>
                     ${isFavorite ? '' : `
@@ -317,7 +319,8 @@ function renderActiveIndicator(indicator) {
     const meta = getIndicatorMeta(indicator);
     const label = getIndicatorLabel(indicator);
     const isFavorite = userPresets.favorites?.includes(indicator.type) || false;
-    const showPresets = meta.name && function() {
+    const description = meta?.description || '';
+    const showPresets = meta?.name && function() {
         const hasPresets = typeof getPresetsForIndicator === 'function' ? getPresetsForIndicator(meta.name) : [];
         if (!hasPresets || hasPresets.length === 0) return '';
         return `<div class="indicator-presets">
@@ -332,8 +335,11 @@ function renderActiveIndicator(indicator) {
                 <button class="indicator-btn visible" onclick="event.stopPropagation(); window.toggleIndicatorVisibility && window.toggleIndicatorVisibility('${indicator.id}')" title="${indicator.visible !== false ? 'Hide' : 'Show'}">
                     ${indicator.visible !== false ? '👁' : '👁‍🗨'}
                 </button>
-                <span class="indicator-name">${label}</span>
-                ${showPresets}
+                <div class="indicator-info">
+                    <span class="indicator-name">${label}</span>
+                    <span class="indicator-desc">${description}</span>
+                </div>
+                ${showPresets || ''}
                 <button class="indicator-btn favorite" onclick="event.stopPropagation(); window.toggleFavorite && window.toggleFavorite('${indicator.type}')" title="Add to favorites">
                     ${isFavorite ? '★' : '☆'}
                 </button>