Merge Frontend modifications new into branch main-1#5
Open
Merge Frontend modifications new into branch main-1#5
Conversation
Update the Users page layout to be responsive: switch the header container to stack vertically on small screens and align horizontally on md+ with spacing (flex-col md:flex-row md:justify-between md:items-center gap-4). Make the "Add New User" button full-width on mobile (w-full md:w-auto). Also apply minor whitespace/formatting cleanups inside the add-user dialog markup.
Update layout and sizing in dashboard users and user-activity pages for better mobile support. Header sections now stack on small screens (flex-col → md:flex-row), titles use responsive font sizes, action buttons are repositioned with responsive spacing, and search inputs switch to full width on small devices (w-full → md:w-64). These changes improve alignment and readability on narrow viewports without altering functionality.
Rework the Hospitals page header and dialog markup to improve responsiveness and alignment. The header now uses a column-to-row flex layout with adjusted heading sizes and left-aligned text; the Add Hospital dialog and trigger were moved into their own container to preserve layout and spacing on small screens. Also updated the All Hospitals card header to be responsive (search input becomes full-width on small screens) and tweaked spacing classes. No functional changes to form behavior were made — this is purely layout/CSS structure cleanup.
Adjust layout and spacing in DoctorsPage for better responsiveness: convert header and card header to column layout on small screens and row on md+, reduce title size on small screens, and left-align text. Move the Add New Doctor Dialog into its own stacked container to sit below the title on mobile (preserving open/reset logic), and make the search input container full-width on small screens with fixed width on md+. No behavior changes to dialog actions or form handling.
Adjust header layout to be column on small screens and row on md+ screens by replacing static flex classes with `flex flex-col gap-4 md:flex-row md:justify-between md:items-center`. Also constrain the Assign Doctor button width with `w-fit` so it doesn't stretch full-width on small viewports. Minor markup/indentation cleanup.
Adjust layout and spacing for Agents and Commissions pages to improve responsiveness on small screens. Agents page: stack header elements on mobile, reduce title size on small screens, left-align text, move the Add New Agent dialog trigger into its own container with proper top margin, and make card header/search input responsive (full width on small, fixed on md). Commissions page: switch header to a column on small screens with sm:flex-row for larger, add gap spacing and constrain the Adjust Rates button to its content (w-fit). These are UI/layout-only changes; no business logic was modified.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request refactors the layout and responsiveness of several dashboard pages to improve usability on smaller screens and enhance visual consistency. The main changes involve updating flexbox layouts, adjusting spacing, and making form controls more responsive across the following pages: Agents, Doctors, Hospitals, Users, User Activity, Doctor-Hospitals, and Commissions.
Responsive layout improvements:
Updated the main header and card header layouts on the Agents, Doctors, Hospitals, Users, and User Activity pages to use
flex-colon small screens and switch toflex-rowon medium screens and above, improving mobile responsiveness and alignment. Adjusted heading sizes for better scaling. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]Ensured that action buttons, dialogs, and search bars within headers and cards are properly aligned and spaced, with full width or adjusted margins on smaller screens for better usability. [1] [2] [3] [4] [5] [6] [7] [8] [9]
Button and input responsiveness:
w-full,md:w-auto,md:w-64) and margin classes to buttons and input fields in headers and dialogs, ensuring they adapt to different screen sizes and maintain visual consistency. [1] [2] [3] [4] [5] [6]Other dashboard-specific layout tweaks:
These changes collectively modernize the dashboard's look and feel, making it more accessible and visually appealing across devices.