From de63fe1355cbecf67ef66d4b3556cc56eba9cba4 Mon Sep 17 00:00:00 2001
From: Sergey Zhuravlev <Zhuravlev1337@gmail.com>
Date: Wed, 12 Feb 2025 15:09:35 +0100
Subject: [PATCH] fix: layout of voting history modal (#3120)

---
 .../VotingHistory/VotingHistoryDialog.tsx     | 114 ++++++++----------
 .../VotingHistory/VotingHistoryList.tsx       |  81 ++++++-------
 .../shared/ui-kit/ScrollArea/ScrollArea.css   |   1 +
 src/renderer/shared/ui-kit/Tabs/Tabs.tsx      |   2 +-
 4 files changed, 94 insertions(+), 104 deletions(-)

diff --git a/src/renderer/features/governance/components/VotingHistory/VotingHistoryDialog.tsx b/src/renderer/features/governance/components/VotingHistory/VotingHistoryDialog.tsx
index 98a80f2591..6dbb281067 100644
--- a/src/renderer/features/governance/components/VotingHistory/VotingHistoryDialog.tsx
+++ b/src/renderer/features/governance/components/VotingHistory/VotingHistoryDialog.tsx
@@ -5,9 +5,8 @@ import { type Referendum } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { useModalClose } from '@/shared/lib/hooks';
 import { cnTw } from '@/shared/lib/utils';
-import { Button, FootnoteText, Icon, SmallTitleText, Tabs } from '@/shared/ui';
-import { type TabItem } from '@/shared/ui/Tabs/common/types';
-import { Modal } from '@/shared/ui-kit';
+import { Button, FootnoteText, Icon, SmallTitleText } from '@/shared/ui';
+import { Box, Modal, Tabs } from '@/shared/ui-kit';
 import { voteHistoryAggregate } from '../../aggregates/voteHistory';
 
 import { VoteCount } from './VoteCount';
@@ -23,7 +22,7 @@ export const VotingHistoryDialog = ({ referendum, onClose }: Props) => {
 
   const { t } = useI18n();
   const [showModal, closeModal] = useModalClose(true, onClose);
-  const [selectedTab, setSelectedTab] = useState(0);
+  const [selectedTab, setSelectedTab] = useState('aye');
 
   const chain = useUnit(voteHistoryAggregate.$chain);
 
@@ -41,66 +40,57 @@ export const VotingHistoryDialog = ({ referendum, onClose }: Props) => {
   const nays = useMemo(() => voteHistory.filter((history) => history.decision === 'nay'), [voteHistory]);
   const abstain = useMemo(() => voteHistory.filter((history) => history.decision === 'abstain'), [voteHistory]);
 
-  const tabs: TabItem[] = [
-    {
-      id: 'ayes',
-      title: (
-        <span className="flex items-center gap-1">
-          <Icon name="thumbUp" size={16} className={cnTw(selectedTab === 0 && 'text-icon-positive')} />
-          <span>{t('governance.referendum.ayes')}</span>
-          <VoteCount count={ayes.length} loading={isLoading} />
-        </span>
-      ),
-      panel: <VotingHistoryList chain={chain} asset={votingAsset} items={ayes} loading={isLoading} />,
-    },
-    {
-      id: 'nays',
-      title: (
-        <span className="flex items-center gap-1">
-          <Icon name="thumbDown" size={16} className={cnTw(selectedTab === 1 && 'text-icon-negative')} />
-          <span>{t('governance.referendum.nays')}</span>
-          <VoteCount count={nays.length} loading={isLoading} />
-        </span>
-      ),
-      panel: <VotingHistoryList chain={chain} asset={votingAsset} items={nays} loading={isLoading} />,
-    },
-    {
-      id: 'abstain',
-      title: (
-        <span className="flex items-center gap-1">
-          <Icon name="minusCircle" size={16} />
-          <span>{t('governance.referendum.abstain')}</span>
-          <VoteCount count={abstain.length} loading={isLoading} />
-        </span>
-      ),
-      panel: <VotingHistoryList chain={chain} asset={votingAsset} items={abstain} loading={isLoading} />,
-    },
-  ];
-
   return (
-    <Modal isOpen={showModal} size="md" height="fit" onToggle={closeModal}>
+    <Modal isOpen={showModal} size="md" height="lg" onToggle={closeModal}>
       <Modal.Title close>{t('governance.voteHistory.title')}</Modal.Title>
-      <Modal.Content>
-        <section className="flex h-[450px] w-modal grow flex-col px-5 pt-4">
-          {hasError ? (
-            <div className="flex h-full flex-col items-center justify-center gap-2">
-              <Icon name="document" size={64} className="text-icon-default" />
-              <SmallTitleText className="mt-4">{t('governance.voteHistory.notAvailable')}</SmallTitleText>
-              <FootnoteText className="text-text-tertiary">
-                {t('governance.voteHistory.notAvailableDescription')}
-              </FootnoteText>
-              <Button
-                className="mt-2"
-                size="sm"
-                onClick={() => voteHistoryAggregate.events.requestVoteHistory({ referendum })}
-              >
-                {t('general.button.refreshButton')}
-              </Button>
-            </div>
-          ) : (
-            <Tabs panelClassName="overflow-y-auto grow" items={tabs} onChange={setSelectedTab} />
-          )}
-        </section>
+      <Modal.Content disableScroll>
+        {hasError ? (
+          <div className="flex h-full flex-col items-center justify-center gap-2">
+            <Icon name="document" size={64} className="text-icon-default" />
+            <SmallTitleText className="mt-4">{t('governance.voteHistory.notAvailable')}</SmallTitleText>
+            <FootnoteText className="text-text-tertiary">
+              {t('governance.voteHistory.notAvailableDescription')}
+            </FootnoteText>
+            <Button
+              className="mt-2"
+              size="sm"
+              onClick={() => voteHistoryAggregate.events.requestVoteHistory({ referendum })}
+            >
+              {t('general.button.refreshButton')}
+            </Button>
+          </div>
+        ) : (
+          <Tabs value={selectedTab} onChange={setSelectedTab}>
+            <Box padding={[4, 5, 0]} shrink={0}>
+              <Tabs.List>
+                <Tabs.Trigger value="aye">
+                  <Icon name="thumbUp" size={16} className={cnTw(selectedTab === 'aye' && 'text-icon-positive')} />
+                  <span>{t('governance.referendum.ayes')}</span>
+                  <VoteCount count={ayes.length} loading={isLoading} />
+                </Tabs.Trigger>
+                <Tabs.Trigger value="nay">
+                  <Icon name="thumbDown" size={16} className={cnTw(selectedTab === 'nay' && 'text-icon-negative')} />
+                  <span>{t('governance.referendum.nays')}</span>
+                  <VoteCount count={nays.length} loading={isLoading} />
+                </Tabs.Trigger>
+                <Tabs.Trigger value="abstain">
+                  <Icon name="minusCircle" size={16} />
+                  <span>{t('governance.referendum.abstain')}</span>
+                  <VoteCount count={abstain.length} loading={isLoading} />
+                </Tabs.Trigger>
+              </Tabs.List>
+            </Box>
+            <Tabs.Content value="aye">
+              <VotingHistoryList chain={chain} asset={votingAsset} items={ayes} loading={isLoading} />
+            </Tabs.Content>
+            <Tabs.Content value="nay">
+              <VotingHistoryList chain={chain} asset={votingAsset} items={nays} loading={isLoading} />
+            </Tabs.Content>
+            <Tabs.Content value="abstain">
+              <VotingHistoryList chain={chain} asset={votingAsset} items={abstain} loading={isLoading} />
+            </Tabs.Content>
+          </Tabs>
+        )}
       </Modal.Content>
     </Modal>
   );
diff --git a/src/renderer/features/governance/components/VotingHistory/VotingHistoryList.tsx b/src/renderer/features/governance/components/VotingHistory/VotingHistoryList.tsx
index 05701bf5c0..eabdbefff6 100644
--- a/src/renderer/features/governance/components/VotingHistory/VotingHistoryList.tsx
+++ b/src/renderer/features/governance/components/VotingHistory/VotingHistoryList.tsx
@@ -6,7 +6,7 @@ import { useDeferredList } from '@/shared/lib/hooks';
 import { formatAsset, formatBalance, performSearch, toAccountId } from '@/shared/lib/utils';
 import { BodyText, FootnoteText } from '@/shared/ui';
 import { AccountExplorers, Address } from '@/shared/ui-entities';
-import { SearchInput } from '@/shared/ui-kit';
+import { Box, ScrollArea, SearchInput } from '@/shared/ui-kit';
 import { type AggregatedVoteHistory } from '../../types/structs';
 
 import { VotingHistoryListEmptyState } from './VotingHistoryListEmptyState';
@@ -38,46 +38,45 @@ export const VotingHistoryList = memo(({ items, asset, chain, loading }: Props)
   const shouldRenderList = !shouldRenderLoader && deferredItems.length > 0;
 
   return (
-    <div className="flex flex-col gap-6 pb-4 pt-6">
-      <SearchInput placeholder={t('governance.searchPlaceholder')} value={query} onChange={setQuery} />
-      <div className="min-h-0">
-        <div className="flex flex-col gap-2">
-          <div className="flex justify-between px-2">
-            <FootnoteText className="text-text-tertiary">{t('governance.voteHistory.listColumnAccount')}</FootnoteText>
-            <FootnoteText className="text-text-tertiary">
-              {t('governance.voteHistory.listColumnVotingPower')}
-            </FootnoteText>
-          </div>
-          <div className="flex flex-col gap-1">
-            {shouldRenderLoader && <VotingHistoryListPlaceholder />}
-            {shouldRenderEmptyState && <VotingHistoryListEmptyState />}
-            {shouldRenderList &&
-              deferredItems.map(({ voter, balance, votingPower, conviction, name }) => {
-                return (
-                  <div key={`${voter}-${balance.toString()}-${conviction}`} className="flex gap-3 px-2 text-body">
-                    <div className="flex min-w-0 shrink grow items-center gap-1">
-                      <Address address={voter} title={name ?? ''} variant="truncate" showIcon />
-                      <AccountExplorers accountId={toAccountId(voter)} chain={chain} />
-                    </div>
-                    <div className="flex shrink-0 basis-28 flex-col items-end gap-0.5">
-                      <BodyText className="whitespace-nowrap">
-                        {t('governance.voteHistory.totalVotesCount', {
-                          value: formatBalance(votingPower, asset.precision).formatted,
-                        })}
-                      </BodyText>
-                      <FootnoteText className="whitespace-nowrap text-text-tertiary">
-                        {t('general.actions.multiply', {
-                          value: formatAsset(balance, asset),
-                          multiplier: conviction,
-                        })}
-                      </FootnoteText>
-                    </div>
+    <Box fitContainer>
+      <Box padding={[6, 5]} shrink={0}>
+        <SearchInput placeholder={t('governance.searchPlaceholder')} value={query} onChange={setQuery} />
+      </Box>
+
+      <Box direction="row" horizontalAlign="space-between" padding={[0, 5, 2]} shrink={0}>
+        <FootnoteText className="text-text-tertiary">{t('governance.voteHistory.listColumnAccount')}</FootnoteText>
+        <FootnoteText className="text-text-tertiary">{t('governance.voteHistory.listColumnVotingPower')}</FootnoteText>
+      </Box>
+      <ScrollArea>
+        <Box gap={1} padding={[0, 3, 2]}>
+          {shouldRenderLoader && <VotingHistoryListPlaceholder />}
+          {shouldRenderEmptyState && <VotingHistoryListEmptyState />}
+          {shouldRenderList &&
+            deferredItems.map(({ voter, balance, votingPower, conviction, name }) => {
+              return (
+                <div key={`${voter}-${balance.toString()}-${conviction}`} className="flex gap-3 px-2 text-body">
+                  <div className="flex min-w-0 shrink grow items-center gap-1">
+                    <Address address={voter} title={name ?? ''} variant="truncate" showIcon />
+                    <AccountExplorers accountId={toAccountId(voter)} chain={chain} />
+                  </div>
+                  <div className="flex shrink-0 basis-28 flex-col items-end gap-0.5">
+                    <BodyText className="whitespace-nowrap">
+                      {t('governance.voteHistory.totalVotesCount', {
+                        value: formatBalance(votingPower, asset.precision).formatted,
+                      })}
+                    </BodyText>
+                    <FootnoteText className="whitespace-nowrap text-text-tertiary">
+                      {t('general.actions.multiply', {
+                        value: formatAsset(balance, asset),
+                        multiplier: conviction,
+                      })}
+                    </FootnoteText>
                   </div>
-                );
-              })}
-          </div>
-        </div>
-      </div>
-    </div>
+                </div>
+              );
+            })}
+        </Box>
+      </ScrollArea>
+    </Box>
   );
 });
diff --git a/src/renderer/shared/ui-kit/ScrollArea/ScrollArea.css b/src/renderer/shared/ui-kit/ScrollArea/ScrollArea.css
index eed06ea0d8..328aff12f5 100644
--- a/src/renderer/shared/ui-kit/ScrollArea/ScrollArea.css
+++ b/src/renderer/shared/ui-kit/ScrollArea/ScrollArea.css
@@ -4,6 +4,7 @@
   --scroll-area-top-fade: 0px;
   --scroll-area-bottom-fade: 0px;
 
+  contain: layout;
   mask-image: linear-gradient(
     to bottom,
     transparent 0px,
diff --git a/src/renderer/shared/ui-kit/Tabs/Tabs.tsx b/src/renderer/shared/ui-kit/Tabs/Tabs.tsx
index 566a420826..817e120a6f 100644
--- a/src/renderer/shared/ui-kit/Tabs/Tabs.tsx
+++ b/src/renderer/shared/ui-kit/Tabs/Tabs.tsx
@@ -44,7 +44,7 @@ const Trigger = ({ value, disabled, children }: TriggerProps) => {
     <RadixTabs.Trigger
       value={value}
       className={cnTw(
-        'flex w-full items-center justify-center rounded bg-transparent px-2 py-1.5 text-button-small text-text-secondary',
+        'flex w-full items-center justify-center gap-1 rounded bg-transparent px-2 py-1.5 text-button-small text-text-secondary',
         'transition-all duration-100',
         'data-[state=active]:bg-white data-[state=active]:text-text-primary data-[state=active]:shadow-card-shadow',
       )}