fix: let layer rows expand based on text instead of overflowing

EOX-A · Aug 22, 2023 · 79b3895 · 79b3895
1 parent fd71172
commit 79b3895
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/elements/layercontrol/src/style.eox.ts b/elements/layercontrol/src/style.eox.ts
@@ -14,16 +14,22 @@ ${radio}
 ${checkbox}
 
 summary > .layer {
-  height: 36px;
-  border-bottom: 1px solid #00417000;
+  min-height: 36px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   padding-right: 12px;
+  padding-top: 0px;
 }
 
 [data-type=group] .title {
+  display: flex;
+  align-items: flex-start;
   font-style: italic;
-  line-height: 1rem;
+  line-height: 1.3rem;
+}
+
+[data-type] .title span {
+  margin-bottom: 8px;
 }
 
 
@@ -33,6 +39,7 @@ summary > .layer {
   height: 24px;
   margin-right: 6px;
   margin-left: -1px;
+  transform: translateY(-2px);
 }
 
 [data-layerconfig] button {
@@ -204,13 +211,19 @@ li .layer {
 li .layer .left,
 li .layer .right {
   display: flex;
+  align-items: flex-start;
 }
-li .layer .left span {
+li .layer .left .title {
   cursor: pointer;
   display: flex;
-  align-items: center;
   margin-left: 6px;
 }
+li .layer .left {
+  margin-top: 7px;
+}
+li .layer .right {
+  margin-top: 5px;
+}
 .drag-handle span {
   display: none;
 }