Skip to content

Commit ffbd699

Browse files
mirekzielinskimirekzielinski
committed
Fix/Issue 4062 Filter ans Sorting Icons goes to new line
1 parent d9eff0d commit ffbd699

File tree

2 files changed

+95
-62
lines changed

2 files changed

+95
-62
lines changed

‎govtool/frontend/src/components/molecules/DataActionsBar.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,16 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
7474
setChosenFilters?.((prev) => (prev ?? []).filter((k) => k !== key));
7575

7676
return (
77-
<Box display="flex" flexDirection="column" gap={1.5}>
77+
<Box display="flex" flexDirection="column" gap={1.5} sx={{ width: "100%" }}>
7878
<Box
79+
display="grid"
80+
gridTemplateColumns={{
81+
xs: "minmax(0,1fr) max-content",
82+
sm: "minmax(0,1fr) max-content",
83+
}}
84+
columnGap={{ xs: 1, sm: 1.5 }}
7985
alignItems="center"
80-
display="flex"
81-
justifyContent="space-between"
82-
gap={{ xs: 0.75, sm: 1.5 }}
83-
flexWrap={{ xs: "wrap", sm: "nowrap" }}
84-
width="100%"
86+
sx={{ width: "100%" }}
8587
>
8688
<InputBase
8789
inputProps={{ "data-testid": "search-input" }}
@@ -115,7 +117,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
115117
borderColor: "#6E87D9",
116118
borderRadius: 50,
117119
boxShadow: "2px 2px 20px 0 rgba(0,0,0,0.05)",
118-
fontSize: 11,
120+
fontSize: { xs: 16, sm: 11 },
119121
fontWeight: 500,
120122
height: 48,
121123
padding: "16px 24px",
@@ -133,6 +135,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
133135
flex: "0 0 auto",
134136
flexShrink: 0,
135137
mt: { xs: 1, sm: 0 },
138+
mr: { xs: 2, sm: 0 },
136139
}}
137140
>
138141
<OrderActionsChip

‎govtool/frontend/src/pages/DRepDirectoryContent.tsx‎

Lines changed: 85 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
6969
const [inProgressDelegationDRepData, setInProgressDelegationDRepData] =
7070
useState<DRepData | undefined>(undefined);
7171

72-
// Set initial filters and sort
7372
useEffect(() => {
7473
if (!lastPath.includes("drep_directory")) {
7574
setChosenFilters([DRepStatus.Active]);
@@ -104,7 +103,7 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
104103
baselineTotalForStatus,
105104
} = useGetDRepListPaginatedQuery(
106105
{
107-
page: page - 1, // convert 1-based UI -> 0-based API
106+
page: page - 1,
108107
pageSize,
109108
searchPhrase: debouncedSearchText,
110109
sorting: chosenSorting as DRepListSort,
@@ -152,8 +151,13 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
152151
AutomatedVotingOptionCurrentDelegation.drep_always_no_confidence);
153152

154153
return (
155-
<Box display="flex" flex={1} flexDirection="column" gap={4}>
156-
{/* My delegation */}
154+
<Box
155+
display="flex"
156+
flex={1}
157+
flexDirection="column"
158+
gap={4}
159+
sx={{ width: "100%", maxWidth: "100vw", overflowX: "hidden" }}
160+
>
157161
{myDrep &&
158162
!inProgressDelegation &&
159163
currentDelegation &&
@@ -162,61 +166,65 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
162166
<Typography variant="title2" sx={{ mb: 2 }}>
163167
<Trans i18nKey="dRepDirectory.myDelegation" values={{ ada }} />
164168
</Typography>
165-
<DRepCard
166-
dRep={myDrep}
167-
isConnected={!!isConnected}
168-
isInProgress={isSameDRep(myDrep, inProgressDelegation)}
169-
isMe={isSameDRep(myDrep, myDRepId)}
170-
/>
169+
<Box sx={{ width: "100%" }}>
170+
<DRepCard
171+
dRep={myDrep}
172+
isConnected={!!isConnected}
173+
isInProgress={isSameDRep(myDrep, inProgressDelegation)}
174+
isMe={isSameDRep(myDrep, myDRepId)}
175+
/>
176+
</Box>
171177
</div>
172178
)}
173179
{inProgressDelegation &&
174180
inProgressDelegation !== myDRepId &&
175181
inProgressDelegationDRepData && (
176-
<DRepCard
177-
dRep={inProgressDelegationDRepData}
178-
isConnected={!!isConnected}
179-
isMe={isSameDRep(inProgressDelegationDRepData, myDRepId)}
180-
isInProgress
181-
/>
182+
<Box sx={{ width: "100%" }}>
183+
<DRepCard
184+
dRep={inProgressDelegationDRepData}
185+
isConnected={!!isConnected}
186+
isMe={isSameDRep(inProgressDelegationDRepData, myDRepId)}
187+
isInProgress
188+
/>
189+
</Box>
182190
)}
183191

184-
{/* Automated voting options */}
185192
{isConnected && (
186193
<div>
187194
<Typography variant="title2" sx={{ mb: 2 }}>
188195
{t("dRepDirectory.delegationOptions")}
189196
</Typography>
190-
<AutomatedVotingOptions
191-
currentDelegation={
192-
!pendingTransaction.delegate && isAnAutomatedVotingOptionChosen
193-
? currentDelegation?.dRepView
194-
: undefined
195-
}
196-
delegate={delegate}
197-
delegationInProgress={
198-
inProgressDelegation &&
199-
(inProgressDelegation ===
200-
AutomatedVotingOptionDelegationId.abstain ||
201-
inProgressDelegation ===
202-
AutomatedVotingOptionDelegationId.no_confidence)
203-
? inProgressDelegation
204-
: undefined
205-
}
206-
isConnected={!!isConnected}
207-
isDelegationLoading={isDelegating}
208-
votingPower={ada.toString()}
209-
pendingTransaction={pendingTransaction}
210-
txHash={
211-
!pendingTransaction.delegate && isAnAutomatedVotingOptionChosen
212-
? currentDelegation?.txHash
213-
: undefined
214-
}
215-
/>
197+
<Box sx={{ width: "100%" }}>
198+
<AutomatedVotingOptions
199+
currentDelegation={
200+
!pendingTransaction.delegate && isAnAutomatedVotingOptionChosen
201+
? currentDelegation?.dRepView
202+
: undefined
203+
}
204+
delegate={delegate}
205+
delegationInProgress={
206+
inProgressDelegation &&
207+
(inProgressDelegation ===
208+
AutomatedVotingOptionDelegationId.abstain ||
209+
inProgressDelegation ===
210+
AutomatedVotingOptionDelegationId.no_confidence)
211+
? inProgressDelegation
212+
: undefined
213+
}
214+
isConnected={!!isConnected}
215+
isDelegationLoading={isDelegating}
216+
votingPower={ada.toString()}
217+
pendingTransaction={pendingTransaction}
218+
txHash={
219+
!pendingTransaction.delegate && isAnAutomatedVotingOptionChosen
220+
? currentDelegation?.txHash
221+
: undefined
222+
}
223+
/>
224+
</Box>
216225
</div>
217226
)}
218227

219-
{/* DRep list */}
220228
<>
221229
<Typography fontSize={18} fontWeight={500} sx={{ mb: 3 }}>
222230
{t("dRepDirectory.listTitle")}
@@ -266,11 +274,31 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
266274
opacity: isPrev ? 0.5 : 1,
267275
transition: "opacity 0.2s",
268276
flex: 1,
277+
width: "100%",
278+
maxWidth: "100%",
279+
overflowX: "hidden",
269280
}}
270281
>
271282
{filteredDoNotListDReps?.length === 0 && <EmptyStateDrepDirectory />}
272283
{filteredDoNotListDReps?.map((dRep) => (
273-
<Box key={dRep.view} component="li" sx={{ listStyle: "none" }}>
284+
<Box
285+
key={dRep.view}
286+
component="li"
287+
sx={{
288+
listStyle: "none",
289+
width: "100%",
290+
maxWidth: "100%",
291+
"& .MuiCard-root, & .MuiPaper-root": {
292+
width: "100% !important",
293+
maxWidth: "100% !important",
294+
marginLeft: "0 !important",
295+
marginRight: "0 !important",
296+
},
297+
"& .MuiCardContent-root, & .MuiCardActions-root": {
298+
minWidth: 0,
299+
},
300+
}}
301+
>
274302
<DRepCard
275303
dRep={dRep}
276304
isConnected={!!isConnected}
@@ -288,16 +316,18 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
288316
))}
289317
</Box>
290318

291-
<PaginationFooter
292-
page={page}
293-
total={total || 0}
294-
pageSize={pageSize}
295-
onPageChange={setPage}
296-
onPageSizeChange={(n) => {
297-
setPageSize(n);
298-
setPage(1);
299-
}}
300-
/>
319+
<Box sx={{ width: "100%", maxWidth: "100%", overflowX: "hidden" }}>
320+
<PaginationFooter
321+
page={page}
322+
total={total || 0}
323+
pageSize={pageSize}
324+
onPageChange={setPage}
325+
onPageSizeChange={(n) => {
326+
setPageSize(n);
327+
setPage(1);
328+
}}
329+
/>
330+
</Box>
301331
</>
302332
</Box>
303333
);

0 commit comments

Comments
 (0)