Skip to content

Commit 3b8040d

Browse files
greedy-wudpeckrgreedy-wudpeckr
committed
Frontend : Fixed Activity-tab responsiveness
Signed-off-by: greedy-wudpeckr <mudituiet@gmail.com>
1 parent 6061941 commit 3b8040d

File tree

2 files changed

+115
-48
lines changed

2 files changed

+115
-48
lines changed

‎frontend/src/components/activity/Activity.tsx‎

Lines changed: 96 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -244,10 +244,19 @@ export function SingleActivityRenderer({
244244
const rows = 5;
245245
const gapPx = 20;
246246
const box = container.getBoundingClientRect();
247-
const x = (box.width / cols) * (index % 3) + gapPx;
248-
const y = (box.height / rows) * Math.floor(index / 3) + gapPx;
249-
const width = box.width / cols - gapPx * (cols - 2);
250-
const height = box.height / rows - gapPx * (rows - 2);
247+
const row = Math.floor(index / 3);
248+
const col = index % 3;
249+
250+
// Calculate cell dimensions accounting for gaps
251+
const cellWidth = (box.width - gapPx * (cols + 1)) / cols;
252+
const cellHeight = Math.max(150, (box.height - gapPx * (rows + 1)) / rows);
253+
254+
// Position with gaps
255+
const x = gapPx + col * (cellWidth + gapPx);
256+
const y = gapPx + row * (cellHeight + gapPx);
257+
258+
const width = cellWidth;
259+
const height = cellHeight;
251260

252261
oldTranslation = activity.style.transform ?? '';
253262
oldHeight = activity.style.height;
@@ -390,16 +399,40 @@ export function SingleActivityRenderer({
390399
{isOverview && (
391400
<Box
392401
sx={{
393-
fontSize: '18px',
402+
fontSize: { xs: '1rem', md: '0.875rem' },
394403
display: 'flex',
404+
flexDirection: 'column',
395405
alignItems: 'center',
396406
justifyContent: 'center',
397-
padding: 1,
398-
gap: 1,
407+
padding: 2,
408+
gap: 1.5,
399409
height: '100%',
410+
minHeight: '150px',
400411
}}
401412
>
402-
<Box sx={{ width: '48px', height: '48px', flexShrink: 0 }}>{icon}</Box> {title}
413+
<Box
414+
sx={{
415+
width: { xs: '32px', sm: '40px', md: '48px' },
416+
height: { xs: '32px', sm: '40px', md: '48px' },
417+
flexShrink: 0,
418+
}}
419+
>
420+
{icon}
421+
</Box>
422+
<Box
423+
sx={{
424+
minWidth: 0,
425+
flex: 1,
426+
textAlign: 'center',
427+
wordBreak: 'break-word',
428+
display: 'flex',
429+
alignItems: 'center',
430+
justifyContent: 'center',
431+
width: '100%',
432+
}}
433+
>
434+
{title}
435+
</Box>
403436
</Box>
404437
)}
405438
<>
@@ -427,17 +460,18 @@ export function SingleActivityRenderer({
427460
>
428461
{!hideTitleInHeader && (
429462
<>
430-
<Box sx={{ width: '18px', height: '18px' }}>{icon}</Box>
463+
<Box sx={{ width: '18px', height: '18px', flexShrink: 0 }}>{icon}</Box>
431464
<Typography
432465
color="textSecondary"
433466
fontSize={14}
434467
sx={{
435-
maxWidth: 'calc(45% - 60px)',
468+
maxWidth: { xs: '100px', sm: '150px', md: 'calc(45% - 60px)' },
469+
minWidth: 0,
436470
whiteSpace: 'nowrap',
437471
textOverflow: 'ellipsis',
438472
overflow: 'hidden',
473+
flexShrink: 1,
439474
}}
440-
title={typeof title === 'string' ? title : undefined}
441475
>
442476
{title}
443477
</Typography>
@@ -451,10 +485,19 @@ export function SingleActivityRenderer({
451485
fontSize: '0.875rem',
452486
paddingX: 0.5,
453487
color: theme.palette.text.secondary,
488+
display: 'flex',
489+
alignItems: 'center',
490+
gap: 0.5,
491+
maxWidth: { xs: '80px', sm: '120px', md: 'none' },
492+
minWidth: 0,
493+
overflow: 'hidden',
494+
textOverflow: 'ellipsis',
495+
whiteSpace: 'nowrap',
496+
flexShrink: 1,
454497
})}
455498
>
456-
<Icon icon="mdi:hexagon-multiple-outline" />
457-
{cluster}
499+
<Icon icon="mdi:hexagon-multiple-outline" style={{ flexShrink: 0 }} />
500+
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{cluster}</span>
458501
</Box>
459502
)}
460503
{!isOverview && (
@@ -1130,7 +1173,8 @@ export const ActivityBar = React.memo(function ({
11301173
position: 'relative',
11311174
alignItems: 'center',
11321175
display: 'flex',
1133-
minHeight: '56px',
1176+
flexWrap: 'nowrap',
1177+
minHeight: { xs: '80px', sm: '70px', md: '56px' },
11341178
overflowX: 'auto',
11351179
scrollbarWidth: 'thin',
11361180
})}
@@ -1148,17 +1192,17 @@ export const ActivityBar = React.memo(function ({
11481192
borderTop: 0,
11491193
borderColor: lastElement === it.id ? theme.palette.divider : 'transparent',
11501194
background: lastElement === it.id ? theme.palette.background.default : 'transparent',
1195+
flexShrink: 0,
11511196
})}
11521197
>
11531198
<Button
11541199
sx={{
11551200
height: '100%',
1156-
padding: '0px 5px 0 10px',
1157-
lineHeight: 1,
1158-
whiteSpace: 'nowrap',
1159-
overflow: 'hidden',
1160-
textOverflow: 'ellipsis',
1201+
padding: '8px 5px 8px 10px',
1202+
lineHeight: 1.3,
11611203
justifyContent: 'start',
1204+
minWidth: { xs: '150px', sm: '200px', md: '300px' },
1205+
maxWidth: { xs: '150px', sm: '200px', md: '300px' },
11621206
}}
11631207
onClick={() => {
11641208
// Minimize or show Activity, unless it's not active then bring it to front
@@ -1170,26 +1214,51 @@ export const ActivityBar = React.memo(function ({
11701214
}
11711215
}}
11721216
>
1173-
<Box sx={{ width: '22px', height: '22px', flexShrink: 0, marginRight: 1 }}>
1174-
{it.icon}
1175-
</Box>
11761217
<Box
11771218
sx={{
11781219
marginRight: 'auto',
11791220
display: 'flex',
11801221
flexDirection: 'column',
11811222
alignItems: 'flex-start',
11821223
gap: 0.5,
1183-
overflow: 'hidden',
1224+
minWidth: 0,
1225+
flex: 1,
11841226
}}
11851227
>
1186-
{it.cluster && <Box sx={{ opacity: 0.7 }}>{it.cluster}</Box>}{' '}
1228+
{it.cluster && (
1229+
<Box
1230+
sx={{
1231+
display: 'flex',
1232+
alignItems: 'center',
1233+
gap: 1,
1234+
width: '100%',
1235+
}}
1236+
>
1237+
<Box sx={{ width: '22px', height: '22px', flexShrink: 0 }}>{it.icon}</Box>
1238+
<Box
1239+
sx={{
1240+
opacity: 0.7,
1241+
wordBreak: 'break-word',
1242+
fontSize: '0.875rem',
1243+
flex: 1,
1244+
minWidth: 0,
1245+
}}
1246+
>
1247+
{it.cluster}
1248+
</Box>
1249+
</Box>
1250+
)}
1251+
{!it.cluster && (
1252+
<Box sx={{ width: '22px', height: '22px', flexShrink: 0, marginBottom: 0.5 }}>
1253+
{it.icon}
1254+
</Box>
1255+
)}
11871256
<Box
11881257
sx={{
1189-
whiteSpace: 'nowrap',
1190-
overflow: 'hidden',
1191-
textOverflow: 'ellipsis',
1258+
wordBreak: 'break-word',
11921259
fontStyle: it.temporary ? 'italic' : undefined,
1260+
width: '100%',
1261+
fontSize: '0.875rem',
11931262
}}
11941263
>
11951264
{it.title ?? 'Something'}

‎frontend/src/components/activity/__snapshots__/Activity.Basic.stories.storyshot‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
class="MuiBox-root css-ha4r1w"
2222
>
2323
<div
24-
class="MuiBox-root css-19rsff"
24+
class="MuiBox-root css-1ww6zew"
2525
/>
2626
<p
27-
class="MuiTypography-root MuiTypography-body1 css-slk4bd-MuiTypography-root"
27+
class="MuiTypography-root MuiTypography-body1 css-1ocw23x-MuiTypography-root"
2828
/>
2929
<div
3030
class="MuiBox-root css-1po99kh"
@@ -80,10 +80,10 @@
8080
class="MuiBox-root css-ha4r1w"
8181
>
8282
<div
83-
class="MuiBox-root css-19rsff"
83+
class="MuiBox-root css-1ww6zew"
8484
/>
8585
<p
86-
class="MuiTypography-root MuiTypography-body1 css-slk4bd-MuiTypography-root"
86+
class="MuiTypography-root MuiTypography-body1 css-1ocw23x-MuiTypography-root"
8787
/>
8888
<div
8989
class="MuiBox-root css-1po99kh"
@@ -129,25 +129,24 @@
129129
</div>
130130
</div>
131131
<div
132-
class="MuiBox-root css-3ykv34"
132+
class="MuiBox-root css-zr2dzt"
133133
>
134134
<div
135-
class="MuiBox-root css-16dgwon"
135+
class="MuiBox-root css-1mw5uhz"
136136
>
137137
<button
138-
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-1jy96qb-MuiButtonBase-root-MuiButton-root"
138+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-x3kn3j-MuiButtonBase-root-MuiButton-root"
139139
tabindex="0"
140140
type="button"
141141
>
142142
<div
143-
class="MuiBox-root css-zlkkwz"
144-
/>
145-
<div
146-
class="MuiBox-root css-18bzmof"
143+
class="MuiBox-root css-1aihc2e"
147144
>
148-
149145
<div
150-
class="MuiBox-root css-1h2ruwl"
146+
class="MuiBox-root css-1h3s6no"
147+
/>
148+
<div
149+
class="MuiBox-root css-1vxjdql"
151150
>
152151
Something
153152
</div>
@@ -168,22 +167,21 @@
168167
</button>
169168
</div>
170169
<div
171-
class="MuiBox-root css-15k1pc3"
170+
class="MuiBox-root css-1oygo4f"
172171
>
173172
<button
174-
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-1jy96qb-MuiButtonBase-root-MuiButton-root"
173+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-x3kn3j-MuiButtonBase-root-MuiButton-root"
175174
tabindex="0"
176175
type="button"
177176
>
178177
<div
179-
class="MuiBox-root css-zlkkwz"
180-
/>
181-
<div
182-
class="MuiBox-root css-18bzmof"
178+
class="MuiBox-root css-1aihc2e"
183179
>
184-
185180
<div
186-
class="MuiBox-root css-1h2ruwl"
181+
class="MuiBox-root css-1h3s6no"
182+
/>
183+
<div
184+
class="MuiBox-root css-1vxjdql"
187185
>
188186
Something
189187
</div>

0 commit comments

Comments
 (0)