Description:
When the UI renders a table on a mobile screen, the horizontal scroll does not work. As a result, the full width of the table cannot be viewed, making it impossible to read all columns.
Steps to Reproduce:
Open the application on a mobile device (or use a responsive emulator).
Navigate to any view that displays a data table.
Attempt to swipe left/right to scroll horizontally.
Observe that the table stays fixed and the overflowed columns are hidden.
Expected Behavior:
The table container should allow horizontal scrolling (touch‑drag or scroll bar) so that users can view all columns on small screens.
Actual Behavior:
No horizontal scroll is possible; the table is clipped at the viewport edge.
Os: Android 15
Browser: mobile app
Device: Samsung Galaxy s24 ultra
Possible Causes / Observations:
CSS overflow-x may be set to hidden or not applied to the table wrapper.
The table might be using display: table without a surrounding
that enables scrolling.
Media queries could be overriding the scroll behavior on smaller breakpoints.
Suggested Fix:
Wrap the table in a container with overflow-x: auto; -webkit-overflow-scrolling: touch; (or equivalent) and ensure the container’s width is set to 100%. Test the fix on various mobile browsers.
Additional Notes:
This issue affects readability and usability for mobile users.
Screenshots / video attached (if applicable).
Please let me know if any further details are needed.
Description:
When the UI renders a table on a mobile screen, the horizontal scroll does not work. As a result, the full width of the table cannot be viewed, making it impossible to read all columns.
Steps to Reproduce:
Open the application on a mobile device (or use a responsive emulator).
Navigate to any view that displays a data table.
Attempt to swipe left/right to scroll horizontally.
Observe that the table stays fixed and the overflowed columns are hidden.
Expected Behavior:
The table container should allow horizontal scrolling (touch‑drag or scroll bar) so that users can view all columns on small screens.
Actual Behavior:
No horizontal scroll is possible; the table is clipped at the viewport edge.
Os: Android 15
Browser: mobile app
Device: Samsung Galaxy s24 ultra
Possible Causes / Observations:
CSS overflow-x may be set to hidden or not applied to the table wrapper.
The table might be using display: table without a surrounding
Media queries could be overriding the scroll behavior on smaller breakpoints.
Suggested Fix:
Wrap the table in a container with overflow-x: auto; -webkit-overflow-scrolling: touch; (or equivalent) and ensure the container’s width is set to 100%. Test the fix on various mobile browsers.
Additional Notes:
This issue affects readability and usability for mobile users.
Screenshots / video attached (if applicable).
Please let me know if any further details are needed.