From 0855adb79755ac55a87a5a76f299f8044ab02919 Mon Sep 17 00:00:00 2001
From: viliusle <www.viliusl@gmail.com>
Date: Wed, 16 Mar 2022 23:18:20 +0200
Subject: [PATCH] fixed layers list style (related to source-atop composition)

---
 src/css/layout.css            |  3 +++
 src/js/core/gui/gui-layers.js | 12 ++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/css/layout.css b/src/css/layout.css
index 82fa1a0..d6afaba 100644
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -429,6 +429,9 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
 	color:var(--text-color);
 	white-space: nowrap;
 }
+.layers_list .item.shorter .layer_name{
+	width: calc(100% - 63px);
+}
 .layers_list .item.active .layer_name{
 	background-color: var(--background-color-active);
 	color: var(--text-color-active);
diff --git a/src/js/core/gui/gui-layers.js b/src/js/core/gui/gui-layers.js
index 25a65d1..89c4329 100644
--- a/src/js/core/gui/gui-layers.js
+++ b/src/js/core/gui/gui-layers.js
@@ -141,11 +141,15 @@ class GUI_layers_class {
 		if (config.layer) {
 			for (var i in layers) {
 				var value = layers[i];
+				var class_extra = '';
+				if(value.composition === 'source-atop'){
+					class_extra += ' shorter';
+				}
+				if (value.id == config.layer.id){
+					class_extra += ' active';
+				}
 
-				if (value.id == config.layer.id)
-					html += '<div class="item active">';
-				else
-					html += '<div class="item">';
+				html += '<div class="item ' + class_extra + '">';
 				if (value.visible == true)
 					html += '	<button class="visibility visible" id="visibility" data-id="' + value.id + '" title="Hide"></button>';
 				else