- @for (var i = 0; i < _receivers.Count; i++)
- {
- var rowIndex = i;
- var receiver = _receivers[rowIndex];
+
+ @for (var i = 0; i < _receivers.Count; i++)
+ {
+ var rowIndex = i;
+ var receiver = _receivers[rowIndex];
-
+
+
+
+
+ }
+
- }
-
-
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index 3e413926..6094203d 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -1502,6 +1502,21 @@
gap: 0.5rem;
}
+.sender-create-wizard__receiver-existing-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ max-height: min(24vh, 220px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ scrollbar-gutter: stable;
+ padding-right: 0.2rem;
+}
+
+.sender-create-wizard__receiver-existing-list > .sender-create-wizard__receiver-row--new {
+ flex: 0 0 auto;
+}
+
.sender-create-wizard__receiver-row {
display: flex;
align-items: flex-start;
@@ -1555,54 +1570,37 @@
.sender-create-wizard__receiver-remove-btn {
flex: 0 0 auto;
- width: 2rem;
- height: 2rem;
+ width: auto;
+ height: auto;
+ align-self: stretch;
+ aspect-ratio: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
- border: 1px solid rgba(220, 38, 38, 0.2);
- border-radius: 6px;
background: transparent;
color: #b91c1c;
padding: 0;
line-height: 1;
}
-.sender-create-wizard__receiver-remove-btn:hover:not(:disabled) {
- background: rgba(220, 38, 38, 0.08);
-}
-
-.sender-create-wizard__receiver-remove-btn:disabled {
- opacity: 0.55;
- cursor: not-allowed;
-}
-
-.sender-create-wizard__receiver-item--new {
- border-style: dashed;
-}
+ .sender-create-wizard__receiver-remove-btn:hover {
+ transform: scale(1.05);
+ }
.sender-create-wizard__receiver-add-inline-btn {
flex: 0 0 auto;
- width: 2rem;
- height: 2rem;
+ width: auto;
+ height: auto;
+ align-self: stretch;
+ aspect-ratio: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
- border: 1px solid rgba(14, 116, 144, 0.25);
- border-radius: 6px;
- background: rgba(236, 254, 255, 0.95);
+ background: transparent;
color: #0f766e;
padding: 0;
line-height: 1;
-}
-
-.sender-create-wizard__receiver-add-inline-btn:hover:not(:disabled) {
- background: rgba(207, 250, 254, 1);
-}
-
-.sender-create-wizard__receiver-add-inline-btn:disabled {
- opacity: 0.55;
- cursor: not-allowed;
+ transition: transform 0.2s ease;
}
.sender-create-wizard__upload-stage {
@@ -1776,6 +1774,10 @@
align-items: stretch;
}
+ .sender-create-wizard__receiver-existing-list {
+ max-height: min(20vh, 180px);
+ }
+
.sender-create-wizard__receiver-fields-stack {
grid-template-columns: 1fr;
}
@@ -1785,13 +1787,10 @@
}
.sender-create-wizard__receiver-remove-btn {
- width: auto;
align-self: flex-end;
}
.sender-create-wizard__receiver-add-inline-btn {
- width: auto;
- min-width: 2rem;
align-self: flex-end;
}