From 773037b85777d53f642fddbe0636ecbd5cc75bf7 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 21 Apr 2025 14:57:11 +0000
Subject: [PATCH] handle many signatures

---
 .../transactions-list.component.html          |  8 ++--
 .../transactions-list.component.scss          | 41 +++++++++++--------
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 92f576856..e25e2fec5 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -63,8 +63,8 @@
                           <fa-icon [icon]="['fas', 'lock-open']" [fixedWidth]="true"></fa-icon>
                         </span>
                       } @else {
-                        @for (sig of tx['_sigs'][vindex]; track sig.signature; let idx = $index) {
-                          @if (idx < 10) {
+                        @for (sig of tx['_sigs'][vindex].slice(0, 7); track sig.signature; let idx = $index) {
+                          @if (idx < 7) {
                             <span
                               class="sig sig-key sighash-{{sig.sighash}}"
                               (mouseenter)="showSigInfo(i, vindex, sig)"
@@ -76,9 +76,9 @@
                             </span>
                           }
                         }
-                        @if (tx['_sigs'][vindex].length > 10) {
+                        @if (tx['_sigs'][vindex].length > 7) {
                           <span class="sig sig-key sig-overflow">
-                            +{{ tx['_sigs'][vindex].length - 10 }}
+                            +{{ tx['_sigs'][vindex].length - 7 }}
                           </span>
                         }
                       }
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index 1e083ff8f..7e1327e2e 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -52,18 +52,26 @@
 .sig-td:hover {
 	.sig-stack {	
 		.sig-key {
-			@for $i from 1 through 10 {
+			@for $i from 1 through 8 {
 				&:nth-child(#{$i}) {
 					transform: translate(#{($i - 1) * 6}px, #{($i - 1) * 6}px);
 				}
 			}
 		}
+
+		.sig-overflow {
+			opacity: 1;
+			transform: translate(30px, 40px);
+		}
 	}
 }
 
 .sig {
 	cursor: pointer;
 	
+	&.sig-overflow {
+		opacity: 0;
+	}
 
 	&.sighash-0 {
 		--sigColor: var(--green);
@@ -91,16 +99,18 @@
 	}
 	color: var(--sigColor);
 
-	@for $i from 1 through 10 {
-		&:nth-child(#{$i}) {
-			transform: translate(#{($i - 1) * 3}px, #{($i - 1) * 3}px);
-			color: color-mix(in srgb, var(--sigColor) #{100 - ($i - 1) * 10} + '%', black);
-			z-index: #{10 - $i};
+	&.sig-key {
+		@for $i from 1 through 8 {
+			&:nth-child(#{$i}) {
+				transform: translate(#{($i - 1) * 3}px, #{($i - 1) * 3}px);
+				color: color-mix(in srgb, var(--sigColor) #{100 - ($i - 1) * 10} + '%', black);
+				z-index: #{10 - $i};
+			}
 		}
-	}
-	@for $i from 4 through 10 {
-		&:nth-child(#{$i}) {
-			transform: translate(9px, 9px);
+		@for $i from 4 through 8 {
+			&:nth-child(#{$i}) {
+				transform: translate(9px, 9px);
+			}
 		}
 	}
 
@@ -131,14 +141,13 @@
 	// background-color: var(--tertiary);
 	color: white;
 	border-radius: 50%;
-	width: 20px;
-	height: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	font-size: 10px;
 	font-weight: bold;
-	z-index: 1;
+	padding: 5px;
+	margin-left: 10px;
+	margin-right: 10px;
+	display: block;
+	transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
 .mobile-bottomcol {