From 803ab7a7da20c6cde8e2cbf83454964465f92d84 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Fri, 3 Nov 2023 11:09:43 +0530
Subject: [PATCH] fix: hiding of action buttons (#460)

* chore: fix hiding of action buttons
---
 .../primitives/document-flow/add-signers.tsx  |  2 +-
 .../document-flow/document-flow-root.tsx      | 11 +++++++---
 packages/ui/styles/theme.css                  | 21 +++++++++++++++++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx
index 31e32575e..14d728f0a 100644
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -176,7 +176,7 @@ export const AddSignersFormPartial = ({
                 <div>
                   <button
                     type="button"
-                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={
                       isSubmitting ||
                       hasBeenSentToRecipientId(signer.nativeId) ||
diff --git a/packages/ui/primitives/document-flow/document-flow-root.tsx b/packages/ui/primitives/document-flow/document-flow-root.tsx
index a88a7627a..aec74dd6c 100644
--- a/packages/ui/primitives/document-flow/document-flow-root.tsx
+++ b/packages/ui/primitives/document-flow/document-flow-root.tsx
@@ -61,8 +61,14 @@ export const DocumentFlowFormContainerContent = ({
   ...props
 }: DocumentFlowFormContainerContentProps) => {
   return (
-    <div className={cn('flex flex-1 flex-col', className)} {...props}>
-      <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">{children}</div>
+    <div
+      className={cn(
+        'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-1 flex-col">{children}</div>
     </div>
   );
 };
@@ -90,7 +96,6 @@ export type DocumentFlowFormContainerStepProps = {
 };
 
 export const DocumentFlowFormContainerStep = ({
-  title,
   step,
   maxStep,
 }: DocumentFlowFormContainerStepProps) => {
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index f56344ed1..fe7bfa087 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -93,3 +93,24 @@
   mask-composite: exclude;
   -webkit-mask-composite: xor;
 }
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  background: transparent;
+  border-radius: 10px;
+  scrollbar-gutter: stable;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgb(100 116 139 / 1);
+  border-radius: 10px;
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgb(100 116 139 / 0.5);
+}