GH-75: Making the application mobile responsive #79

yasandu0505 · 2026-01-07T12:35:28Z

-Refactored the application to behave user friendly in different screen sizes. New logics for rendering components have implemented.

-Changed some ui components to display them on a small screen in an efficient way.

-And also added a new custom hook for disable the viewing of complex ui components on the portrait mode of the screen (complex ui components are required to have at least a landscape orientation). the hook is reusable with any component.

This PR closes #75

Updated Later -> This PR handles the responsiveness of the Organization panel only.

…mponents

…g landscape detection

gemini-code-assist · 2026-01-07T12:35:52Z

Summary of Changes

Hello @yasandu0505, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the application's mobile responsiveness, ensuring a consistent and user-friendly experience across a wide range of devices. It introduces a novel approach to managing complex UI elements on smaller screens by enforcing a landscape orientation when necessary, and systematically refines the layout and presentation of key components throughout the application.

Highlights

Mobile Responsiveness: The application has been refactored to be user-friendly across different screen sizes, with new logic for rendering components and adjustments to existing UI elements.
Landscape Required Hook: A new custom React hook, useLandscapeRequired, has been implemented to disable the viewing of complex UI components in portrait mode on small screens, prompting the user to rotate their device. This hook is reusable for any component.
Responsive UI Adjustments: Numerous UI components, including the sidebar, date range selectors, department and person tabs, and timeline navigation, have been updated with responsive styling to ensure optimal display on various devices.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces significant improvements to the application's mobile responsiveness. The changes refactor UI components to adapt to different screen sizes, including a new custom hook to enforce landscape orientation for complex UI. My review identified a critical issue in the new landscapeRequired hook that would break server-side rendering, a typo in a CSS class name, and a minor maintainability issue with a hardcoded breakpoint. Overall, the changes are well-aligned with the goal of improving the mobile user experience.

src/components/landscapeRequired.jsx

src/pages/LandingPage/screens/LandingPage.jsx

src/pages/HomePage/screens/HomePage.jsx

vibhatha · 2026-01-09T02:45:06Z

@yasandu0505 when you need to link the corresponding issue, you need to say

closes https://github.com/LDFLK/openginxplore/issues/75 not just adding the issue Id there won't link it.
Please follow this practice it helps, otherwise we cannot track the PR from the Sprint board we have to guess or search which is going to take more time.

yasandu0505 · 2026-01-09T02:51:33Z

@yasandu0505 when you need to link the corresponding issue, you need to say

closes https://github.com/LDFLK/openginxplore/issues/75 not just adding the issue Id there won't link it.

Please follow this practice it helps, otherwise we cannot track the PR from the Sprint board we have to guess or search which is going to take more time.

No,it links the issue to the PR. That's how even zaeema did yesterday , I haven't just hard coded the issue number . It has been selected and picked , so it connects to the issue

zaeema-n · 2026-01-09T03:48:01Z

@yasandu0505 when you need to link the corresponding issue, you need to say
closes https://github.com/LDFLK/openginxplore/issues/75 not just adding the issue Id there won't link it.
Please follow this practice it helps, otherwise we cannot track the PR from the Sprint board we have to guess or search which is going to take more time.

No,it links the issue to the PR. That's how even zaeema did yesterday , I haven't just hard coded the issue number . It has been selected and picked , so it connects to the issue

@yasandu0505 you have to say closes #75 not just adding the issue id as #75. closes is a keyword that is required, that is how I showed you yesterday.

yasandu0505 · 2026-01-09T03:59:47Z

@yasandu0505 when you need to link the corresponding issue, you need to say
closes https://github.com/LDFLK/openginxplore/issues/75 not just adding the issue Id there won't link it.
Please follow this practice it helps, otherwise we cannot track the PR from the Sprint board we have to guess or search which is going to take more time.

No,it links the issue to the PR. That's how even zaeema did yesterday , I haven't just hard coded the issue number . It has been selected and picked , so it connects to the issue

@yasandu0505 you have to say closes #75 not just adding the issue id as #75. closes is a keyword that is required, that is how I showed you yesterday.

Okay, My bad , Tank you!

sehansi-9 · 2026-01-09T10:14:30Z

src/pages/OrganizationPage/components/MinistryCardGrid.jsx

in the ministry card grid. there is a row containing search bar, filter dropdown and view toggle. That section needs to be corrected for proper responsiveness for smaller screens

ChanukaUOJ · 2026-01-13T09:20:38Z

In mobile view better to put this in 2 lines and center the content.
first line --> the icons
second line --> the message

ChanukaUOJ · 2026-01-13T10:16:02Z

When drawer opened, this icon color is a bit different with the other one. Its better to put the Book icon's color.

ChanukaUOJ · 2026-01-13T10:24:06Z

Its better to have the same margin around the components.
Stretch the filters in the filter panel (in mobile screen) | Dropdowns should take the same width | Timeline should takes the same width and the year buttons also should be fill the width by stretching(keep the gaps as it is, just change the button width)

ChanukaUOJ · 2026-01-13T10:29:08Z

This button also should takes the same width as the others and match the border, text, icon colors with the dropdowns.
Dropdown height and Search bar height is different. Make it same

ChanukaUOJ · 2026-01-13T10:46:14Z

There is a light gray background in this department component in the desktop mode. that is removed when it is comes to the mobile view, if putting the gray background in mobile screen doesnt work, better to add it in the key highlights components to separate that with the in the below at least.
The department search bar should take the full width as well (mobile screen)

ChanukaUOJ · 2026-01-13T11:06:29Z

In the desktop mode when the user hover over to this button, a tooltip component comes by showing the related links. But there in no way to hover over in the mobile, so its better to show it this marked area as a small component without highlighting much with other components.

Same as the information (i) icons, in the mobile screen i think its better to show the tooltip when the user click on it. cz there is no way to track the hover action in mobile view

ChanukaUOJ · 2026-01-13T11:44:04Z

There is an issue with calendar in the mobile view

ChanukaUOJ · 2026-01-13T11:49:30Z

These icons are a bit fancy. maybe something like this Icon Open for suggesions

as well as check the functionality of when the user rotate back when in the graph, the same rotate message still appear.

ChanukaUOJ · 2026-01-13T11:52:05Z

Better to align the graph like this. Think about the dropdown, search bar styling as i mentioned earlier.

ChanukaUOJ

Added Initial Comments

ChanukaUOJ · 2026-01-14T03:40:54Z

src/components/landscapeRequired.jsx

+export default function LandscapeRequired({
+  smallMaxWidth = 768,
+  children,
+  message = "Rotate your device to landscape 📱↔️"


This icon should be changed as i mentioned above

"Rotate your device" is enough?

ChanukaUOJ · 2026-01-14T03:45:54Z

src/components/landscapeRequired.jsx

+const overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  background: "rgba(0,0,0,0.9)",
+  color: "#fff",
+  fontSize: "20px",
+  textAlign: "center",
+  zIndex: 9999,
+  padding: "16px"
+};


Better to use tailwind classes for styling

I kept it like this , because it is easier to customize the overlay, let's discuss

ChanukaUOJ · 2026-01-14T09:12:33Z

src/pages/OrganizationPage/components/DepartmentTab.jsx

Something I already mentioned above to change the styling of this in the mobile view

ChanukaUOJ · 2026-01-14T09:18:17Z

src/pages/HomePage/screens/HomePage.jsx

  const navigate = useNavigate();
  const location = useLocation();
  const { tab } = useParams();
+  const MOBILE_BREAKPOINT = 768;


Is it better to take this from a config so no need to initialize a new variable whenever we needed.

but the mobile breakpoint never changes (That is why i kept it as a constant). so it does not matter , what do you think ?

Is it better to take this from a config so no need to initialize a new variable whenever we needed.

yasandu0505 · 2026-01-19T05:02:13Z

In mobile view better to put this in 2 lines and center the content. first line --> the icons second line --> the message

resolved! 💪

yasandu0505 · 2026-01-19T05:10:01Z

When drawer opened, this icon color is a bit different with the other one. Its better to put the Book icon's color.

Was there any specific reasons you guys put a z index of 50 to this share button ? , that's why it looks weird . because of that z-50. it appears above all the layout, that's why the color look different with the black overlay. color has not changed.
This affect to the time line selecting component as well.

yasandu0505 · 2026-01-19T05:54:14Z

Its better to have the same margin around the components.

Stretch the filters in the filter panel (in mobile screen) | Dropdowns should take the same width | Timeline should takes the same width and the year buttons also should be fill the width by stretching(keep the gaps as it is, just change the button width)

The year preset is not inside a separate container to control it independently, and it affects the other components as well , when try to control , because it is inside the parent container. (never keep a component inside a parent container without keeping it inside a separate container, when you have other components inside the same parent container)

…to align perfectly.

yasandu0505 · 2026-01-19T08:42:59Z

This button also should takes the same width as the others and match the border, text, icon colors with the dropdowns.

Dropdown height and Search bar height is different. Make it same

I don't think making the toggle section have the full width will look good. It would look complex, instead of that we can keep only the icons, that way is better.
And for the colors I have't changes any colors in my PR. Do you want me to change the colors ?

yasandu0505 · 2026-01-19T09:38:04Z

There is a light gray background in this department component in the desktop mode. that is removed when it is comes to the mobile view, if putting the gray background in mobile screen doesnt work, better to add it in the key highlights components to separate that with the in the below at least.

The department search bar should take the full width as well (mobile screen)

Department search bar has taken the full width of the it's container , can't go further more as it is a nested component. So if we are gonna do that, I think we have to do some re-arrangements of the components in order to achieve that.

…filter bars

…nings

yasandu0505 · 2026-01-19T10:24:18Z

In the desktop mode when the user hover over to this button, a tooltip component comes by showing the related links. But there in no way to hover over in the mobile, so its better to show it this marked area as a small component without highlighting much with other components.

Same as the information (i) icons, in the mobile screen i think its better to show the tooltip when the user click on it. cz there is no way to track the hover action in mobile view

These should be configured by the way you create the hover effects. Generally, when we add a hover effect , on the desktop it appears when we hover , and on mobile it appears on the when we click on it.

example -> go to live project section.

yasandu0505 · 2026-01-19T10:52:27Z

Better to align the graph like this. Think about the dropdown, search bar styling as i mentioned earlier.

That dropdown , search bar styles are losing control with overlapping with tailwind and mui. , i have to discuss it with sehansi.

ChanukaUOJ · 2026-01-22T09:24:14Z

@yasandu0505 Test this in local with the new changes. It seems like some crashes are there

yasandu0505 added 5 commits January 6, 2026 12:36

style : configure padding on the ui component

543797e

style : minimize the header of the dashboard

9ddec00

style: making the department, people views responsive with all the co…

fbd98f9

…mponents

style: make the graph view and its content mobile responsive, handlin…

1bf25ee

…g landscape detection

style: fix the side panel to work smart on the small & larger screens

34950d2

yasandu0505 requested review from ChanukaUOJ and sehansi-9 January 7, 2026 12:35

gemini-code-assist bot reviewed Jan 7, 2026

View reviewed changes

src/components/landscapeRequired.jsx Outdated Show resolved Hide resolved

src/pages/LandingPage/screens/LandingPage.jsx Outdated Show resolved Hide resolved

src/pages/HomePage/screens/HomePage.jsx Show resolved Hide resolved

yasandu0505 changed the title ~~Closes #75: Making the application mobile responsive~~ GH-75: Making the application mobile responsive Jan 8, 2026

yasandu0505 added 3 commits January 8, 2026 19:53

resolve : use SSR-safety patterns

0c457aa

fix : fixing typo

761dc8a

fix : fixing a code Quality issue

6fff006

sehansi-9 reviewed Jan 9, 2026

View reviewed changes

ChanukaUOJ reviewed Jan 14, 2026

View reviewed changes

ChanukaUOJ assigned ChanukaUOJ and yasandu0505 Jan 15, 2026

ChanukaUOJ removed their assignment Jan 15, 2026

modify : modify the footer to be centre on mbile screen

f66aee1

fix : remove unnecessary z indexes from components

012d1c0

yasandu0505 added 2 commits January 19, 2026 11:28

modify : modify the time line component stech over the mobile screen …

2f3b455

…to align perfectly.

modify : configured the calendar headers for mobile view

82d3ec2

yasandu0505 added 2 commits January 19, 2026 15:09

modify : modify the ministry toggle and also the it's search bar and …

7bcbe96

…filter bars

fix : highlighting the key-highlights section. and fixing the positio…

9d387fc

…nings

yasandu0505 and others added 2 commits January 19, 2026 16:23

modify : modifying the landscape only wrapper to with a better ui

8865cf0

Merge branch 'main' into mobile-responsive

294da6b

GH-75: Making the application mobile responsive #79

Are you sure you want to change the base?

GH-75: Making the application mobile responsive #79

Uh oh!

Conversation

yasandu0505 commented Jan 7, 2026 • edited by ChanukaUOJ Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Jan 7, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vibhatha commented Jan 9, 2026

Uh oh!

yasandu0505 commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zaeema-n commented Jan 9, 2026

Uh oh!

yasandu0505 commented Jan 9, 2026

Uh oh!

sehansi-9 Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

ChanukaUOJ commented Jan 13, 2026

Uh oh!

ChanukaUOJ commented Jan 13, 2026

Uh oh!

ChanukaUOJ commented Jan 13, 2026

Uh oh!

ChanukaUOJ commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChanukaUOJ commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChanukaUOJ commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChanukaUOJ commented Jan 13, 2026

Uh oh!

ChanukaUOJ commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChanukaUOJ commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChanukaUOJ left a comment

Choose a reason for hiding this comment

Uh oh!

ChanukaUOJ Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

ChanukaUOJ Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

yasandu0505 Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

ChanukaUOJ Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

ChanukaUOJ Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

yasandu0505 Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yasandu0505 commented Jan 19, 2026

Uh oh!

yasandu0505 commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

yasandu0505 commented Jan 7, 2026 •

edited by ChanukaUOJ

Loading

yasandu0505 commented Jan 9, 2026 •

edited

Loading

ChanukaUOJ commented Jan 13, 2026 •

edited

Loading

ChanukaUOJ commented Jan 13, 2026 •

edited

Loading

ChanukaUOJ commented Jan 13, 2026 •

edited

Loading

ChanukaUOJ commented Jan 13, 2026 •

edited

Loading

ChanukaUOJ commented Jan 13, 2026 •

edited

Loading

yasandu0505 Jan 16, 2026 •

edited

Loading

yasandu0505 commented Jan 19, 2026 •

edited

Loading

yasandu0505 commented Jan 19, 2026 •

edited

Loading