Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

chore: Fix global change requests table scaling (#10842)

Browse Source 
Assigns more reasonable sizes and scaling to the change requests table.
Once the window gets too narrow, it'll result in a horizontal overflow.


<img width="1527" height="498" alt="image"
src="https://github.com/user-attachments/assets/a2697d51-fa6d-42c1-9b46-7e2d70a183d8"
/>

<img width="1269" height="492" alt="image"
src="https://github.com/user-attachments/assets/f2d1c916-06dd-449e-8bb8-f3895457d975"
/>
<img width="1070" height="510" alt="image"
src="https://github.com/user-attachments/assets/765f09f1-214f-46c9-a65b-3a7a2c71aeeb"
/>
<img width="967" height="503" alt="image"
src="https://github.com/user-attachments/assets/ca3bd439-12b1-4438-9028-96d473ef6b29"
/>
<img width="896" height="507" alt="image"
src="https://github.com/user-attachments/assets/e2b07de9-8100-466f-ac62-b9078e0bb060"
/>
This commit is contained in:
Thomas Heartman 2025-10-23 10:51:26 +02:00 committed by GitHub
parent 527d94d0fc
commit 5f51756fcc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/changeRequest/ChangeRequests/ChangeRequests.tsx
View File

@ -45,6 +45,7 @@ const StyledPaginatedTable = styled(
td: { td: {
verticalAlign: 'top', verticalAlign: 'top',
maxWidth: '250px',
}, },
})); }));
@ -105,7 +106,7 @@ const ChangeRequestsInner = () => {
columnHelper.accessor('id', { columnHelper.accessor('id', {
id: 'Title', id: 'Title',
header: 'Title', header: 'Title',
meta: { width: '300px' }, meta: { width: '35%' },
cell: GlobalChangeRequestTitleCell, cell: GlobalChangeRequestTitleCell,
}), }),
columnHelper.accessor('features', { columnHelper.accessor('features', {
@ -134,20 +135,20 @@ const ChangeRequestsInner = () => {
columnHelper.accessor('createdBy', { columnHelper.accessor('createdBy', {
id: 'By', id: 'By',
header: 'By', header: 'By',
meta: { width: '180px', align: 'left' }, meta: { width: '10%' },
enableSorting: false, enableSorting: false,
cell: ({ getValue }) => <AvatarCell value={getValue()} />, cell: ({ getValue }) => <AvatarCell value={getValue()} />,
}), }),
columnHelper.accessor('createdAt', { columnHelper.accessor('createdAt', {
id: 'Submitted', id: 'Submitted',
header: 'Submitted', header: 'Submitted',
meta: { width: '100px' }, meta: { width: '5%' },
cell: ({ getValue }) => <TimeAgoCell value={getValue()} />, cell: ({ getValue }) => <TimeAgoCell value={getValue()} />,
}), }),
columnHelper.accessor('environment', { columnHelper.accessor('environment', {
id: 'Environment', id: 'Environment',
header: 'Environment', header: 'Environment',
meta: { width: '100px' }, meta: { width: '10%' },
cell: ({ getValue }) => ( cell: ({ getValue }) => (
<HighlightCell maxTitleLines={1} value={getValue()} /> <HighlightCell maxTitleLines={1} value={getValue()} />
), ),
@ -155,7 +156,7 @@ const ChangeRequestsInner = () => {
columnHelper.accessor('state', { columnHelper.accessor('state', {
id: 'Status', id: 'Status',
header: 'Status', header: 'Status',
meta: { width: '170px' }, meta: { width: '10%' },
cell: ({ getValue, row }) => ( cell: ({ getValue, row }) => (
<ChangeRequestStatusCell value={getValue()} row={row} /> <ChangeRequestStatusCell value={getValue()} row={row} />
), ),

2
frontend/src/component/changeRequest/ChangeRequests/GlobalChangeRequestTitleCell.tsx
View File

@ -57,7 +57,7 @@ export const GlobalChangeRequestTitleCell = ({
const crPath = `${projectPath}/change-requests/${id}`; const crPath = `${projectPath}/change-requests/${id}`;
return ( return (
<TextCell sx={{ minWidth: '300px' }}> <TextCell>
<LinkContainer> <LinkContainer>
<Truncator title={projectName}> <Truncator title={projectName}>
<BaseLink to={projectPath}>{projectName}</BaseLink> <BaseLink to={projectPath}>{projectName}</BaseLink>

5
frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx
View File

@ -1,16 +1,15 @@
import { Box, styled } from '@mui/material'; import { Box, styled } from '@mui/material';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import type { VFC } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { Highlighter } from 'component/common/Highlighter/Highlighter'; import { Highlighter } from 'component/common/Highlighter/Highlighter';
import { Truncator } from 'component/common/Truncator/Truncator'; import { Truncator } from 'component/common/Truncator/Truncator';
import type { FC } from 'react';
const StyledBox = styled(Box)(({ theme }) => ({ const StyledBox = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
width: '300px',
padding: theme.spacing(1, 0, 1, 2), padding: theme.spacing(1, 0, 1, 2),
})); }));
@ -41,7 +40,7 @@ interface FeaturesCellProps {
project: string; project: string;
} }
export const FeaturesCell: VFC<FeaturesCellProps> = ({ value, project }) => { export const FeaturesCell: FC<FeaturesCellProps> = ({ value, project }) => {
const { searchQuery } = useSearchHighlightContext(); const { searchQuery } = useSearchHighlightContext();
const featureNames = value?.map((feature: any) => feature.name); const featureNames = value?.map((feature: any) => feature.name);
return ( return (