fix: scrollbar for basket (#1968)

novasamatech · Jul 17, 2024 · 4500b4b · 4500b4b
1 parent 829cb6f
commit 4500b4b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/renderer/app/index.css b/src/renderer/app/index.css
@@ -65,3 +65,7 @@ ul:focus-visible {
   left: 0;
   top: 0;
 }
+
+.scrollbar-stable {
+  scrollbar-gutter: stable both-edges;
+}
diff --git a/src/renderer/pages/Basket/ui/Basket.tsx b/src/renderer/pages/Basket/ui/Basket.tsx
@@ -76,7 +76,7 @@ export const Basket = () => {
             </div>
           </div>
 
-          <div className="w-full mt-4 gap-4 flex flex-col items-center overflow-y-auto">
+          <div className="w-full mt-4 gap-4 flex flex-col items-center overflow-y-auto scrollbar-stable">
             <ul className="rounded-md flex divide-y flex-col gap-y-1.5 w-[736px]">
               {filteredTxs.map((tx) => (
                 <li key={tx.id} className="flex gap-x-4 px-3 bg-block-background-default">

diff --git a/src/renderer/pages/Basket/ui/Operation.tsx b/src/renderer/pages/Basket/ui/Operation.tsx
@@ -50,7 +50,7 @@ export const Operation = ({ tx, errorText, validating, onClick, onTxRemoved }: P
     if (errorText) {
       return (
         <Tooltip offsetPx={-65} content={<Trans t={t} i18nKey={errorText} />}>
-          <div className="flex gap-x-1 items-center rounded-md bg-badge-red-background-default px-2 py-0.5">
+          <div className="w-[106px] flex gap-x-1 items-center justify-center rounded-md bg-badge-red-background-default px-2 py-0.5">
             <HelpText className="text-text-negative">{t('basket.validationError')} </HelpText>
           </div>
         </Tooltip>
@@ -60,11 +60,12 @@ export const Operation = ({ tx, errorText, validating, onClick, onTxRemoved }: P
     if (tx.error) {
       return (
         <Tooltip offsetPx={-65} content={<Trans t={t} i18nKey={tx.error.message} />}>
-          <div className="flex gap-x-1 items-center rounded-md bg-badge-orange-background-default px-2 py-0.5">
+          <div className="w-[106px] flex gap-x-1 items-center justify-center rounded-md bg-badge-orange-background-default px-2 py-0.5">
             <HelpText className="text-text-warning">
               {t('basket.chainError', {
                 date: (tx.error as ChainError).dateCreated
-                  ? new Date((tx.error as ChainError).dateCreated).toLocaleDateString()
+                  ? // TODO: Use formatDate from i18n
+                    new Date((tx.error as ChainError).dateCreated).toLocaleDateString()
                   : '',
               })}
             </HelpText>