diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor index 54a1353e..aa9057bb 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor @@ -282,73 +282,74 @@
- @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; }