Skip to content

PSP-10928: UI/UX: Inconsistent Formatting and Alignment of Column Heading and Text in List-view Tables #5239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
asanchezr merged 1 commit into from
Mar 3, 2026
Merged

PSP-10928: UI/UX: Inconsistent Formatting and Alignment of Column Heading and Text in List-view Tables #5239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
497 changes: 0 additions & 497 deletions source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .../src/features/acquisition/list/AcquisitionSearchResults/AcquisitionSearchResults.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ describe('Acquisition Search Results Table', () => {
const { getByText, findAllByText } = setup({ results: [] });

await findAllByText('No matching results can be found. Try widening your search criteria.');
expect(getByText('Owner')).toBeVisible();
expect(getByText('Owners')).toBeVisible();
});

it('displays alternate project', async () => {
Expand Down
4 changes: 2 additions & 2 deletions ...sition/list/AcquisitionSearchResults/__snapshots__/AcquisitionSearchResults.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ exports[`Acquisition Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Owner
Owners
</div>
</div>
<div
Expand All @@ -243,7 +243,7 @@ exports[`Acquisition Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Civic Address / PID / PIN
Civic address / PID / PIN
</div>
</div>
<div
Expand Down
4 changes: 2 additions & 2 deletions source/frontend/src/features/acquisition/list/AcquisitionSearchResults/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const columns: ColumnWithProps<AcquisitionSearchResultModel>[] = [
},
},
{
Header: 'Owner',
Header: 'Owners',
accessor: 'owners',
align: 'left',
clickable: true,
Expand All @@ -188,7 +188,7 @@ export const columns: ColumnWithProps<AcquisitionSearchResultModel>[] = [
},
},
{
Header: 'Civic Address / PID / PIN',
Header: 'Civic address / PID / PIN',
accessor: 'fileProperties',
align: 'left',
maxWidth: 40,
Expand Down
4 changes: 2 additions & 2 deletions source/frontend/src/features/admin/users/__snapshots__/ManageUsersPage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1031,7 +1031,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
<div
class="sortable-column"
>
Email
E-mail
<div
class="c11"
data-testid="sort-column-email"
Expand Down Expand Up @@ -1147,7 +1147,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
<div
class="sortable-column"
>
MOTT region(s)
MOTT region
</div>
</div>
<div
Expand Down
4 changes: 2 additions & 2 deletions source/frontend/src/features/admin/users/constants/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const getUserColumns = (refresh: () => void): ColumnWithProps<FormUser>[]
sortable: true,
},
{
Header: 'Email',
Header: 'E-mail',
accessor: 'email',
align: 'left',
clickable: true,
Expand Down Expand Up @@ -83,7 +83,7 @@ export const getUserColumns = (refresh: () => void): ColumnWithProps<FormUser>[]
},
},
{
Header: 'MOTT region(s)',
Header: 'MOTT region',
accessor: 'regions',
align: 'left',
clickable: true,
Expand Down
16 changes: 8 additions & 8 deletions ...sition/list/DispositionSearchResults/__snapshots__/DispositionSearchResults.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ exports[`Disposition search results table > matches snapshot 1`] = `
class="th"
colspan="1"
role="columnheader"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
>
<div
class="sortable-column"
Expand Down Expand Up @@ -118,7 +118,7 @@ exports[`Disposition search results table > matches snapshot 1`] = `
class="th"
colspan="1"
role="columnheader"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
>
<div
class="sortable-column"
Expand Down Expand Up @@ -273,7 +273,7 @@ exports[`Disposition search results table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Team member
Team members
</div>
</div>
<div
Expand All @@ -285,14 +285,14 @@ exports[`Disposition search results table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Civic Address / PID / PIN
Civic address / PID / PIN
</div>
</div>
<div
class="th"
colspan="1"
role="columnheader"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
>
<div
class="sortable-column"
Expand Down Expand Up @@ -397,7 +397,7 @@ exports[`Disposition search results table > matches snapshot 1`] = `
<div
class="td clickable"
role="cell"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<a
Expand Down Expand Up @@ -425,7 +425,7 @@ exports[`Disposition search results table > matches snapshot 1`] = `
<div
class="td clickable"
role="cell"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
FILE_REFERENCE 8128827 3EAD56A
Expand Down Expand Up @@ -480,7 +480,7 @@ exports[`Disposition search results table > matches snapshot 1`] = `
<div
class="td clickable"
role="cell"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
/>
<div
Expand Down
10 changes: 5 additions & 5 deletions source/frontend/src/features/disposition/list/DispositionSearchResults/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const columns: ColumnWithProps<DispositionSearchResultModel>[] = [
clickable: true,
sortable: true,
width: 10,
maxWidth: 20,
maxWidth: 25,
Cell: (props: CellProps<DispositionSearchResultModel>) => {
const { hasClaim } = useKeycloakWrapper();
if (hasClaim(Claims.DISPOSITION_VIEW)) {
Expand All @@ -50,7 +50,7 @@ export const columns: ColumnWithProps<DispositionSearchResultModel>[] = [
clickable: true,
sortable: true,
width: 10,
maxWidth: 20,
maxWidth: 25,
},
{
Header: 'Disposition file name',
Expand All @@ -77,7 +77,7 @@ export const columns: ColumnWithProps<DispositionSearchResultModel>[] = [
maxWidth: 20,
},
{
Header: 'Team member',
Header: 'Team members',
accessor: 'dispositionTeam',
align: 'left',
clickable: true,
Expand Down Expand Up @@ -138,7 +138,7 @@ export const columns: ColumnWithProps<DispositionSearchResultModel>[] = [
},
},
{
Header: 'Civic Address / PID / PIN',
Header: 'Civic address / PID / PIN',
accessor: 'fileProperties',
align: 'left',
Cell: (props: CellProps<DispositionSearchResultModel>) => {
Expand All @@ -159,7 +159,7 @@ export const columns: ColumnWithProps<DispositionSearchResultModel>[] = [
clickable: true,
sortable: true,
width: 10,
maxWidth: 20,
maxWidth: 25,
},
{
Header: 'Status',
Expand Down
16 changes: 8 additions & 8 deletions ...ce/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -929,7 +929,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
class="th"
colspan="1"
role="columnheader"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
>
<div
class="sortable-column"
Expand Down Expand Up @@ -975,7 +975,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
class="th"
colspan="1"
role="columnheader"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
>
<div
class="sortable-column"
Expand Down Expand Up @@ -1130,7 +1130,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
<div
class="sortable-column"
>
Team member
Team members
</div>
</div>
<div
Expand All @@ -1142,14 +1142,14 @@ exports[`Disposition List View > matches snapshot 1`] = `
<div
class="sortable-column"
>
Civic Address / PID / PIN
Civic address / PID / PIN
</div>
</div>
<div
class="th"
colspan="1"
role="columnheader"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
>
<div
class="sortable-column"
Expand Down Expand Up @@ -1254,7 +1254,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
<div
class="td clickable"
role="cell"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<a
Expand Down Expand Up @@ -1282,7 +1282,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
<div
class="td clickable"
role="cell"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
FILE_REFERENCE 8128827 3EAD56A
Expand Down Expand Up @@ -1337,7 +1337,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
<div
class="td clickable"
role="cell"
style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
style="box-sizing: border-box; flex: 25 0 auto; min-width: 30px; width: 25px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
/>
<div
Expand Down
14 changes: 7 additions & 7 deletions source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const maxPropertyDisplayCount = 2;

const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
{
Header: 'L-File Number',
Header: 'L-File number',
accessor: 'lFileNo',
align: 'right',
clickable: true,
Expand All @@ -36,7 +36,7 @@ const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
),
},
{
Header: 'Expiry Date',
Header: 'Expiry date',
accessor: 'expiryDate',
align: 'left',
sortable: true,
Expand Down Expand Up @@ -75,15 +75,15 @@ const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
},
},
{
Header: 'Program Name',
Header: 'Program name',
accessor: 'programName',
align: 'left',
sortable: true,
width: 30,
maxWidth: 60,
},
{
Header: 'Tenant Names',
Header: 'Tenant names',
align: 'left',
width: 40,
maxWidth: 100,
Expand All @@ -101,7 +101,7 @@ const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
},
},
{
Header: 'Account Type',
Header: 'Account type',
align: 'left',
sortable: false,
width: 25,
Expand All @@ -110,7 +110,7 @@ const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
Cell: renderTypeCode,
},
{
Header: 'Properties',
Header: 'Civic address / PID / PIN',
align: 'left',
width: 75,
Cell: (props: CellProps<ApiGen_Concepts_Lease>) => {
Expand All @@ -125,7 +125,7 @@ const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
},
},
{
Header: 'Historical File #',
Header: 'Historical file #',
align: 'left',
clickable: false,
sortable: false,
Expand Down
14 changes: 7 additions & 7 deletions ...rc/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
L-File Number
L-File number
<div
class="c0"
data-testid="sort-column-lFileNo"
Expand Down Expand Up @@ -127,7 +127,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Expiry Date
Expiry date
<div
class="c0"
data-testid="sort-column-expiryDate"
Expand Down Expand Up @@ -173,7 +173,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Program Name
Program name
<div
class="c0"
data-testid="sort-column-programName"
Expand Down Expand Up @@ -219,7 +219,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Tenant Names
Tenant names
</div>
</div>
<div
Expand All @@ -231,7 +231,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Account Type
Account type
</div>
</div>
<div
Expand All @@ -243,7 +243,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Properties
Civic address / PID / PIN
</div>
</div>
<div
Expand All @@ -255,7 +255,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
<div
class="sortable-column"
>
Historical File #
Historical file #
</div>
</div>
<div
Expand Down
Loading
Loading