Skip to content

G2P-5804: responsive UI improvements #198

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
shibu-narayanan merged 5 commits into from
Oct 16, 2026
Merged

G2P-5804: responsive UI improvements #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e4148f
G2P-5805 fix: improve responsiveness of homepage, register, change re…
Q-Niranjan Oct 15, 2026
d9100d1
G2P-5807 fix: improve responsiveness of the intake page and related c…
Q-Niranjan Oct 15, 2026
ef44577
G2P-5815 fix: improve responsiveness of the registry configuration
Q-Niranjan Oct 15, 2026
a9ea795
G2P-5817 fix: improve responsiveness of the registers configuration
Q-Niranjan Oct 16, 2026
495f8e9
G2P-5818 fix: improve responsiveness of the data model, outgest, inge…
Q-Niranjan Oct 16, 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
11 changes: 6 additions & 5 deletions ui/staff-ui/src/app/[locale]/configuration/intake-forms/[intakeformid]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const IntakeFormIdPage = () => {

return (
<>
<div className="pt-10 px-7.5 mb-6">
<div className="mb-6 px-3 pt-10 sm:px-6 lg:px-7.5">
<BreadcrumbBar breadcrumb={breadcrumb} />
</div>

Expand All @@ -135,11 +135,12 @@ const IntakeFormIdPage = () => {
onView={() => setModalType('view')}
/>

<div className=" ml-4 mt-4 px-7.5">
<div className="flex justify-between items-center h-14">
<div className="font-medium text-[20px]">{t('intake_form_tabs')}</div>
<div className="flex items-center h-full">
<div className="mt-4 px-3 sm:px-6 lg:px-7.5">
<div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0 break-words font-medium text-[20px]">{t('intake_form_tabs')}</div>
<div className="min-w-0 w-full sm:w-auto">
<TopBar
embedded
breadcrumb={[]}
showFilters={false}
showPagination={true}
Expand Down
14 changes: 6 additions & 8 deletions ui/staff-ui/src/app/[locale]/configuration/intake-forms/[intakeformid]/tabs/[tabId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const IntakeFormTabIdPage = () => {

return (
<>
<div className="pt-10 px-7.5 mb-6">
<div className="mb-6 px-3 pt-10 sm:px-6 lg:px-7.5">
<BreadcrumbBar breadcrumb={breadcrumb} />
</div>

Expand All @@ -148,14 +148,12 @@ const IntakeFormTabIdPage = () => {
onView={() => setModalType('view')}
/>

<div className=" ml-4 mt-4 px-7.5">
<div className="flex justify-between items-center h-14">


{/* TopBar */}
<div className="font-medium text-[20px]">{t('intake_form_tab_sections')}</div>
<div className="flex items-center h-full">
<div className="mt-4 px-3 sm:px-6 lg:px-7.5">
<div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0 break-words font-medium text-[20px]">{t('intake_form_tab_sections')}</div>
<div className="min-w-0 w-full sm:w-auto">
<TopBar
embedded
breadcrumb={[]}
showFilters={false}
showPagination={true}
Expand Down
12 changes: 7 additions & 5 deletions ui/staff-ui/src/app/[locale]/configuration/registers/[registerId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ const RegisterConfigurationPage = () => {

return (
<>
<div className="pt-10 px-7.5 mb-6">
<div className="mb-6 px-3 pt-4 sm:px-6 sm:pt-6 lg:px-7.5 lg:pt-10">
<BreadcrumbBar breadcrumb={breadcrumb} />
</div>

Expand All @@ -194,17 +194,18 @@ const RegisterConfigurationPage = () => {
onView={() => setIsViewModalOpen(true)}
/>

<div className="ml-4 mt-4 px-7.5">
<div className="flex justify-between items-end">
<div className="relative z-10 shrink-0">
<div className="mt-4 px-3 sm:px-6 lg:px-7.5 xl:ml-4">
<div className="flex flex-col gap-2 xl:flex-row xl:items-end xl:justify-between">
<div className="relative z-10 min-w-0">
<ConfigurationTabs
activeTab={activeTab}
setActiveTab={setActiveTab}
tabLabels={tabLabels}
/>
</div>

<div className="flex items-center shrink-0 min-h-14">
{activePaginatedTab && (
<div className="flex min-h-14 min-w-0 items-center xl:shrink-0">
<TopBar
embedded
breadcrumb={[]}
Expand Down Expand Up @@ -251,6 +252,7 @@ const RegisterConfigurationPage = () => {
showCapsule={false}
/>
</div>
)}
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions ...src/app/[locale]/configuration/registers/[registerId]/scores/[scoreDefinitionId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,15 +98,15 @@ const ScoreDefinitionAttributesPage = () => {

if (!scoreDetails) {
return (
<div className="min-h-screen bg-secondary-first px-7.5 pt-10">
<div className="min-h-screen bg-secondary-first px-3 pt-4 sm:px-6 sm:pt-6 lg:px-7.5 lg:pt-10">
<p className="text-neutral-first">{t('score_definition_not_found')}</p>
</div>
);
}

return (
<>
<div className="pt-10 px-7.5 mb-6">
<div className="mb-6 px-3 pt-4 sm:px-6 sm:pt-6 lg:px-7.5 lg:pt-10">
<BreadcrumbBar breadcrumb={breadcrumb} />
</div>

Expand Down
4 changes: 2 additions & 2 deletions ...ff-ui/src/app/[locale]/configuration/registers/[registerId]/sections/[sectionId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ const SectionConfigurationPage = () => {
}

return (
<div className="flex flex-col flex-1 min-h-0">
<div className="pt-4 px-7.5 mb-2 shrink-0">
<div className="flex min-h-0 min-w-0 flex-1 flex-col">
<div className="mb-2 shrink-0 px-3 pt-4 sm:px-6 sm:pt-6 lg:px-7.5 lg:pt-10">
<BreadcrumbBar breadcrumb={breadcrumb} />
</div>

Expand Down
2 changes: 1 addition & 1 deletion ui/staff-ui/src/app/[locale]/configuration/registers/[registerId]/tabs/[tabId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const TabConfigurationPage = () => {

return (
<>
<div className="pt-10 px-7.5 mb-6">
<div className="mb-6 px-3 pt-4 sm:px-6 sm:pt-6 lg:px-7.5 lg:pt-10">
<BreadcrumbBar breadcrumb={breadcrumb} />
</div>

Expand Down
18 changes: 9 additions & 9 deletions ui/staff-ui/src/app/[locale]/configuration/registry/details/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const RegistryConfigurationPage = () => {
showAddNewButton={false}
/>

<div className="mx-7.5 pb-10 max-w-5xl">
<div className="mx-3 sm:mx-6 lg:mx-7.5 pb-10 max-w-5xl">
{isLoading ? (
<div className="bg-neutral-second rounded-[10px] p-12 flex justify-center shadow-sm border border-secondary-second/40">
<Image src="/images/common/loading.gif" alt="Loading" width={48} height={48} />
Expand All @@ -162,23 +162,23 @@ const RegistryConfigurationPage = () => {
onCancel={() => setIsEditing(false)}
/>
) : (
<div className="relative bg-neutral-second rounded-[10px] p-8 border border-secondary-second/40 flex flex-col gap-8">
<div className="relative bg-neutral-second rounded-[10px] p-4 sm:p-8 border border-secondary-second/40 flex flex-col gap-8">
<Can action={CONFIGURATION_REGISTRY_ACTIONS.edit}>
<button
type="button"
onClick={startEditing}
className="absolute top-6 right-6 z-10 bg-neutral-second px-4 py-2 rounded-[10px] border border-secondary-second shadow-sm flex items-center gap-2 text-sm font-semibold text-neutral-first whitespace-nowrap"
className="self-end md:absolute md:top-6 md:right-6 md:z-10 bg-neutral-second px-4 py-2 rounded-[10px] border border-secondary-second shadow-sm flex items-center gap-2 text-sm font-semibold text-neutral-first whitespace-nowrap"
>
<SquarePen size={18} strokeWidth={2} />
<span>{t('edit_registry_details')}</span>
</button>
</Can>

<div className="flex flex-col gap-6 pb-6 border-b border-secondary-second pr-4 md:pr-56">
<div className="flex flex-col gap-6 pb-6 border-b border-secondary-second md:pr-56">
<div className="flex flex-col sm:flex-row gap-8 items-start">
<div className="flex flex-col gap-2 min-w-0 w-full sm:w-auto sm:max-w-[min(100%,28rem)]">
<span className="text-sm text-neutral-first/60">{t('registry_logo')}</span>
<div className="h-30 min-w-30 w-full max-w-full relative rounded-[10px] overflow-hidden flex items-center justify-center border border-secondary-second/40 bg-secondary-first/30 px-3">
<div className="h-30 min-w-0 w-full max-w-full relative rounded-[10px] overflow-hidden flex items-center justify-center border border-secondary-second/40 bg-secondary-first/30 px-3">
{hasCustomLogo ? (
<Image
src={resolvedLogo}
Expand All @@ -193,7 +193,7 @@ const RegistryConfigurationPage = () => {
unoptimized
/>
) : (
<div className="w-30 h-30 flex flex-col items-center justify-center text-neutral-first/40 gap-1">
<div className="w-full h-full flex flex-col items-center justify-center text-neutral-first/40 gap-1">
<ImageIcon size={40} strokeWidth={1.5} />
<span className="text-xs">{t('no_file_selected')}</span>
</div>
Expand Down Expand Up @@ -224,7 +224,7 @@ const RegistryConfigurationPage = () => {
{!isHorizontalLogo && (
<div className="flex flex-col gap-2 min-w-0">
<span className="text-sm text-neutral-first/60">{t('registry_name')}</span>
<h2 className="text-[26px] font-bold text-primary-second m-0 truncate">
<h2 className="text-[26px] font-bold text-primary-second m-0 truncate" title={resolvedName}>
{resolvedName}
</h2>
</div>
Expand All @@ -239,7 +239,7 @@ const RegistryConfigurationPage = () => {
</div>
<div className="flex flex-col min-w-0">
<span className="text-sm text-neutral-first/60">{t('registry_theme')}</span>
<span className="text-base font-semibold text-neutral-first truncate">
<span className="text-base font-semibold text-neutral-first truncate" title={selectedTheme?.theme_mnemonic || t('no_items_found')}>
{selectedTheme?.theme_mnemonic || t('no_items_found')}
</span>
</div>
Expand Down Expand Up @@ -278,7 +278,7 @@ const RegistryConfigurationPage = () => {
)}
<div className="flex flex-col min-w-0">
<span className="text-sm text-neutral-first/60">{t('registry_language')}</span>
<span className="text-base font-semibold text-neutral-first truncate">
<span className="text-base font-semibold text-neutral-first truncate" title={selectedLanguage?.language_label || t('no_items_found')}>
{selectedLanguage?.language_label || t('no_items_found')}
</span>
</div>
Expand Down
12 changes: 6 additions & 6 deletions ui/staff-ui/src/app/[locale]/configuration/registry/languages/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ const LanguagesConfigurationPage = () => {
showAddNewButton={false}
/>

<div className="mx-7.5 flex flex-col gap-5 pb-10">
<div className="bg-neutral-second rounded-[10px] p-8 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center shadow-sm">
<div className="flex flex-col gap-1.5">
<div className="mx-3 sm:mx-6 lg:mx-7.5 flex flex-col gap-5 pb-10">
<div className="bg-neutral-second rounded-[10px] p-4 sm:p-8 grid grid-cols-1 xl:grid-cols-2 gap-6 xl:gap-8 items-center shadow-sm">
<div className="flex flex-col gap-1.5 min-w-0">
<h1 className="text-[22px] font-bold text-neutral-first m-0 tracking-tight">Language configuration</h1>
</div>
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 justify-end">
<div className="w-full sm:w-80">
<div className="flex min-w-0 flex-col items-stretch gap-3 md:flex-row md:items-center xl:justify-end">
<div className="w-full min-w-0 md:w-auto md:flex-1 md:max-w-80">
<LanguageSelector
languages={languages}
languagesLoading={languagesLoading}
Expand All @@ -56,7 +56,7 @@ const LanguagesConfigurationPage = () => {
<button
id="create-language-btn"
onClick={() => setIsModalOpen(true)}
className="w-fit self-start sm:self-auto whitespace-nowrap h-10 px-5 bg-neutral-first text-neutral-second rounded-[10px] flex items-center justify-center gap-2 hover:bg-neutral-first/90 transition-all active:scale-95 shadow-lg shadow-neutral-first/10"
className="flex h-10 w-full min-w-0 items-center justify-center gap-2 whitespace-nowrap rounded-[10px] bg-neutral-first px-5 text-neutral-second shadow-lg shadow-neutral-first/10 transition-all hover:bg-neutral-first/90 active:scale-95 md:w-auto md:flex-1 xl:w-fit xl:flex-none"
>
<Plus size={16} strokeWidth={3} />
<span className="text-sm font-bold">{t('add_new_language')}</span>
Expand Down
16 changes: 8 additions & 8 deletions ui/staff-ui/src/app/[locale]/configuration/registry/themes/create/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,10 @@ const CreateThemePage = () => {
showAddNewButton={false}
/>

<div className="mx-7.5 flex flex-col gap-5 pb-10 font-roboto">
<div className="mx-3 sm:mx-6 lg:mx-7.5 flex flex-col gap-5 pb-10 font-roboto">
{/* Header card */}
<div className="bg-neutral-second rounded-[10px] p-6 flex items-center justify-between gap-4">
<div className="flex items-center gap-4">
<div className="bg-neutral-second rounded-[10px] p-4 sm:p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div className="flex items-center gap-4 min-w-0">
<button
onClick={() => router.back()}
className="w-9 h-9 rounded-[10px] bg-secondary-first hover:bg-secondary-second flex items-center justify-center transition-colors"
Expand All @@ -106,28 +106,28 @@ const CreateThemePage = () => {
<div className="flex items-center gap-3">

<div>
<h1 className="text-lg font-semibold text-neutral-first m-0">{t('theme_config_new_theme')}</h1>
<h1 className="text-lg font-semibold text-neutral-first m-0 truncate" title={t('theme_config_new_theme')}>{t('theme_config_new_theme')}</h1>
</div>
</div>
</div>

<div className="flex items-center gap-3">
<div className="flex items-center gap-3 w-full sm:w-auto">
<button
onClick={() => router.back()}
className="px-5 h-8.5 rounded-[10px] bg-secondary-second text-neutral-first/70 text-sm font-semibold hover:bg-secondary-third transition-colors flex items-center gap-2"
className="flex-1 sm:flex-none px-5 h-8.5 rounded-[10px] bg-secondary-second text-neutral-first/70 text-sm font-semibold hover:bg-secondary-third transition-colors flex items-center justify-center gap-2"
>
{t('theme_config_cancel')}
</button>
<button
onClick={handleSave}
className="px-5 h-8.5 rounded-[10px] bg-neutral-first text-neutral-second text-sm font-semibold transition-colors shadow-lg flex items-center gap-2"
className="flex-1 sm:flex-none px-5 h-8.5 rounded-[10px] bg-neutral-first text-neutral-second text-sm font-semibold transition-colors shadow-lg flex items-center justify-center gap-2"
>
{t('theme_config_create')}
</button>
</div>
</div>

<div className="bg-neutral-second rounded-[10px] p-6">
<div className="bg-neutral-second rounded-[10px] p-4 sm:p-6">
<div className="space-y-6">
<div>
<label className="block text-sm font-semibold text-neutral-first mb-2">
Expand Down
12 changes: 6 additions & 6 deletions ui/staff-ui/src/app/[locale]/configuration/registry/themes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,14 @@ const ThemePage = () => {
showAddNewButton={false}
/>

<div className="mx-7.5 flex flex-col gap-5 pb-10">
<div className="bg-neutral-second rounded-[10px] p-8 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center shadow-sm">
<div className="flex flex-col gap-1.5">
<div className="mx-3 sm:mx-6 lg:mx-7.5 flex flex-col gap-5 pb-10">
<div className="bg-neutral-second rounded-[10px] p-4 sm:p-8 grid grid-cols-1 xl:grid-cols-2 gap-6 xl:gap-8 items-center shadow-sm">
<div className="flex flex-col gap-1.5 min-w-0">
<h1 className="text-[22px] font-bold text-neutral-first m-0 tracking-tight">{t('theme_config_title')}</h1>
</div>

<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 justify-end">
<div className="w-full sm:w-80">
<div className="flex min-w-0 flex-col items-stretch gap-3 md:flex-row md:items-center xl:justify-end">
<div className="w-full min-w-0 md:w-auto md:flex-1 md:max-w-80">
<ThemeSelector
themes={themes}
themesLoading={themesLoading}
Expand All @@ -128,7 +128,7 @@ const ThemePage = () => {
<button
id="create-theme-btn"
onClick={() => router.push('/configuration/registry/themes/create')}
className="h-10 px-5 bg-neutral-first text-neutral-second rounded-[10px] flex items-center justify-center gap-2 hover:bg-neutral-first/90 transition-all active:scale-95 shadow-lg shadow-neutral-first/10"
className="flex h-10 w-full min-w-0 items-center justify-center gap-2 rounded-[10px] bg-neutral-first px-5 text-neutral-second shadow-lg shadow-neutral-first/10 transition-all hover:bg-neutral-first/90 active:scale-95 md:w-auto md:flex-1 xl:w-fit xl:flex-none"
>
<Plus size={16} strokeWidth={3} />
<span className="text-sm font-bold">{t('theme_config_new_theme')}</span>
Expand Down
2 changes: 1 addition & 1 deletion ui/staff-ui/src/app/[locale]/intake-form/[type]/new/[intakeFormId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function NewIntakeFormSubmissionPage() {
showCapsule={false}
/>

<div className="mx-7.5">
<div className="mx-3 sm:mx-6 lg:mx-7.5">
{loading ? (
<div className="flex items-center justify-center py-20">
<span className="text-neutral-first/50">{t('loading')}</span>
Expand Down
Loading
Loading