Skip to content

tweak(persons): let the filters be closed from the navbar on mobile #5409

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

Open
ux-git wants to merge 2 commits into
base: main
Choose a base branch
from
Open

tweak(persons): let the filters be closed from the navbar on mobile #5409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee08421
tweak(persons): let the filters be closed from the navbar on mobile
ux-git Sep 4, 2026
c9017b4
tweak(persons): reset the scroll position when the filters close
ux-git Sep 4, 2026
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
7 changes: 5 additions & 2 deletions src/features/persons/filter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import useFilter from './useFilter';
import AssignmentGroup from '../assignment_group';
import Tabs from '@components/tabs';
import TabLabel from '@components/tab_label_with_badge';
import { PersonsFilterProps } from './index.types';

@devin-ai-integration devin-ai-integration Bot Sep 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔍 New type bypasses path aliases

The PersonsFilterProps import uses a relative path. Repository rules require TypeScript path aliases for imports.

Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.


const PersonsFilter = () => {
const PersonsFilter = ({ hideTitle }: PersonsFilterProps) => {
const { t } = useAppTranslation();

const { tabletDown, mobile400Down, desktopUp } = useBreakpoints();
Expand Down Expand Up @@ -111,7 +112,9 @@ const PersonsFilter = () => {
flexWrap: 'wrap',
}}
>
<Typography className="h4">{t('tr_filters')}</Typography>
{!hideTitle && (
<Typography className="h4">{t('tr_filters')}</Typography>
)}
{filters.length > 0 && (
<Box
sx={{
Expand Down
6 changes: 6 additions & 0 deletions src/features/persons/filter/index.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export type PersonsFilterProps = {
/**
* Hides the heading when the filters already have a title of their own.
*/
hideTitle?: boolean;
};
38 changes: 32 additions & 6 deletions src/pages/persons/all_persons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ const PersonsAll = () => {
handleCloseExchange,
} = useAllPersons();

const isFilterSubpage = !desktopUp && isPanelOpen;

const handleCloseFilter = () => {
setIsPanelOpen(false);

// the filters can be scrolled far past where the list starts
window.scroll({ top: 0 });
};

return (
<Box
sx={{
Expand All @@ -46,8 +55,11 @@ const PersonsAll = () => {
}}
>
<PageTitle
title={t('tr_personsAll')}
title={isFilterSubpage ? t('tr_filters') : t('tr_personsAll')}
secondaryTitle={isFilterSubpage ? t('tr_personsAll') : undefined}
onBack={isFilterSubpage ? handleCloseFilter : undefined}
buttons={
!isFilterSubpage &&
isPersonEditor && (
<NavBarButtonGroup>
<NavBarButton
Expand Down Expand Up @@ -90,7 +102,9 @@ const PersonsAll = () => {
flexDirection: 'column',
}}
>
<Box sx={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
<Box
sx={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}
>
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
<PersonsSearch />
</Box>
Expand Down Expand Up @@ -132,14 +146,24 @@ const PersonsAll = () => {
flexDirection: 'column',
}}
>
<Box sx={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
<Box
sx={{
display: 'flex',
gap: '16px',
alignItems: 'flex-start',
}}
>
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
<PersonsSearch />
</Box>
<Button
variant="secondary"
disableAutoStretch
sx={{ flexShrink: 0, height: '48px', padding: '8px 16px' }}
sx={{
flexShrink: 0,
height: '48px',
padding: '8px 16px',
}}
onClick={() => setIsPanelOpen((prev) => !prev)}
endIcon={
isPanelOpen ? <IconPanelOpen /> : <IconPanelClose />
Expand Down Expand Up @@ -168,11 +192,13 @@ const PersonsAll = () => {
backgroundColor: 'var(--white)',
border: '1px solid var(--accent-300)',
borderRadius: 'var(--radius-xl)',
padding: '16px',
width: '100%',
overflow: 'hidden',
}}
>
<PersonsFilter />
<Box sx={{ padding: '16px' }}>
<PersonsFilter hideTitle />
</Box>
</Box>
</Box>
</Slide>
Expand Down
Loading